Animate CSS

This module is to provide easy integration of Animate CSS, a bunch of cool, fun and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water awesomeness.

Usage:
https://github.com/animate-css/animate.css/blob/main/README.md

Module usage:
This module allows you to implement Animate CSS animations in your Drupal modules & themes. Once you have enabled this module and add the library, then you can use any animations included in Animate CSS.

Example
In your module/theme JS you can write $('#yourElement').addClass('animate__animated animate__bounceOutLeft');

You can also use Block Class module to add classes to your blocks through the admin UI.

To see Animate CSS in use on a Drupal site, please see this demo.

In the demo linked above, I have enabled the module and added class "animated shake" to navigation block and "animated hinge" to search block.

Dependencies

Libraries
Animate CSS in sites/all/libraries/animate (can be downloaded from https://github.com/animate-css/animate.css).

Branches

  • branch 2.0.x: D8 and D9 with animate.css version 3.7
  • branch 2.1.x: D9 and D10 with animate.css version 4.1
Supporting organizations: 
Provided resources for Development

Project information

Releases