Picture of Phil Lowe
Animate.css
by Phil Lowe - Tuesday, 4 October 2016, 9:41 AM
 

Hello,

I was wondering if anyone has any experience in installing and using animate.css within the adapt framework. Any help or advice would be great. 

Picture of Gareth Walker
Re: Animate.css
by Gareth Walker - Thursday, 6 October 2016, 8:28 AM
 

Hi Phil - I was doing some experimentation and asked a similar question a little while back

https://community.adaptlearning.org/mod/forum/discuss.php?d=1439#p6654

The path I've since taken is to make use of this plug-in, which in my (relatively limited) experience works well for animating specific components - e.g. images / text - when they scroll into view. 

https://github.com/cgkineo/adapt-component-animate

The plug-in's documentation isn't extensive but it uses velocity.js (http://velocityjs.org/) - so in most cases I've managed to figure things out with reference to the velocity docs.

 

Picture of Ignacio Cinalli
Re: Animate.css
by Ignacio Cinalli - Thursday, 6 October 2016, 5:43 PM
 

Hi Phil, one way is move animate.css to theme folder (adapt-contrib-vanilla\less) and rename it animate.less.

Best Regards.

Picture of Phil Lowe
Re: Animate.css
by Phil Lowe - Friday, 7 October 2016, 9:33 AM
 

Gareth/ Ignacio,

Thanks for the tips, these are good ideas that I will look into further ...

I actually did it by adding a less version of animate.css:

https://github.com/codeworksdev/animate.less

I added it as an extension within the framework. I now use jQuery to call the classes and works great.

Regards, Phil