The animations module consist of a set of cool cross-browser animations based on CSS/JS. You can easily add multiple predefined animations to your site, using CSS selectors in the module settings page.

Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Installation & Usage Example

Download and install the module, use "drush animations-libraries" or download the libraries manually -> see requirements at the bottom.
To add the desired animation to all your "H1" tags as an example go to /admin/config/animations/config
Choose your desired effects and add one selector per line to apply the effect and save.

Selector Examples

For more advanced users: You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

List of animations

typewriter
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Add your effect? Propose it in the issue queue or write a patch :)

All the cool kids use Typed.js
https://slack.com
https://envato.com
https://productmap.co/
...

Extras

WOW.js provides more control over the animate.css animations when using them in code.

By default the wow.js library integrates with the Animate CSS library, what means that the CSS animations will start when those elements become visible as you scroll down the page. You can see a demo on the wow.js library home page.

Dependencies

The module currently integrates the following libraries - Animate.css, typed.js and wow.js.

Use "drush animations-libraries" or "drush dal" after enabling the module to download all the libraries automatically or download them manually.

If you are not using drush - download, extract and rename the folders to have the correct paths:

[DRUPAL_ROOT]/libraries/animateCSS/animate.css-master/animate.min.css (downloaded from https://github.com/daneden/animate.css version 3.5.2 and higher)
[DRUPAL_ROOT]/libraries/typedJS/typed.js-master/lib/typed.js (downloaded from https://github.com/mattboldt/typed.js/ version 1.1.4 and higher)
[DRUPAL_ROOT]/libraries/wowJS/WOW-master/dist/wow.min.js (downloaded from https://github.com/matthieua/WOW version 1.1.0 and higher)

Animations (JS/CSS)

Issues

D10 CompatRTBCCode Created over 1 year ago

Automated Drupal 9 compatibility fixesRTBCCode Created over 4 years ago

D10 Compat
RTBC
Code
Created over 1 year ago

Automated Drupal 9 compatibility fixes
RTBC
Code
Created over 4 years ago