Adapt Learning Community: Adapt AT V5-Animation of titles

Hi again folks,

I thought I would try two for two today.

Animation- I have installed the adapt animation plugin. Only problem with it it only animates the 'entire components'. The titles, body and so on, on articles and blocks, no luck. I could not work out how to get custom element going after naming divclass (called it stu) then testing it. Again nothing. I know the animate is not officially comaptible with V5 where I suspect lies the problem.

Am I able to achieve animations (that are listed within the plugin) on titles, body and so on (article, blocks) the same as what this plugin would do, with custom .CSS/Less added?

Thank for taking the time to read this I appreciate it.

do you mean https://github.com/cgkineo/adapt-component-animate ?

this isn't really my area of expertise but I think you can achieve something similar now using the _onScreen property of articles/blocks/components... there's an example in the v5 demo course, see here for the settings.

Show parent | Reply

Matt again thank you.

Yes that's indeed the one. It has lovely animations, but it only works on the entire component.

And I will have two hopes trying to work it out if its a grey area for you! :)

I did try to gain some insight from inspect element to try and work out how the plugin worked with 'entire component' (simple fade in). I couldn't for the life of me work out how to translate it to custom css/less.

I've just checked in again not sure how long for.... wife is on the phone doing shopping lists for tomorrow...her parents are getting on in years.... but the conversation is 'can you get us a cake...?' 10 minutes later.... item number two... LOL!

I reckon I'll be an Adapt ninja by the time they get to item fifty!

Thank again Matt.

Show parent | Reply

Hi again Matt. I know you said this was not your area of expertise. I have looked at the _onscreen code link. Matt could you give some insight as to how I use that to animate please? I am wondering if its just not what folks are using on V5?

Show parent | Reply

I have found the relevant file now. I am on the authoring tool though, not the framework btw. All is well there and I have put in the following: _onScreen": { "_isEnabled": true, "_classes": "fadeInLeft", "_percentInviewVertical": 50 }, Previously isEnabled was false and classes was empty. I save the changes made on the .json, go back to my course and preview it and it appears the .json reverts back to its default of isEnabled 'false' and classes "" Is there a way I make the setting remain how I set them or is this a framework thing? Apologies for my lack of knowledge. I think I am at least getting there!

Show parent | Reply

If you're on the authoring tool you should not be editing .json files directly... the .json files are generated from what's in the database when you preview/publish.

The _onScreen settings are called 'On-screen classes' in the authoring tool and should be available when you go to edit any page/article/block/component.

Show parent | Reply

Ahhhh.. Matt thank you..... I am sorry, it must seem as if I'm being a right doughnut, but I have learned something here and now I know why the .json kept reverting to default as it were. Yes! I see it.... On-screen classes. I have just slapped myself... haha! I will give it a go shortly. You are a star again. Thank you.

Show parent | Reply

Is there a resource that shows all the different animation types and where they can be applied?

Thanks

Show parent | Reply

As of Vanilla v5.3.0, the following animations are predefined:
Supported classes = 'fade-in' | 'fade-in-left' | 'fade-in-right' | 'fade-in-top' | 'fade-in-bottom'. Additional classes can be used but they must be predefined in one of the Less files.

The above comes from Vanilla's example.json. It's worth reviewing because it lists other predefined classes that can be helpful.

Show parent | Reply