A cross-browser library of CSS and JavaScript animations.


animate.css is 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.

Official documentation

For more detailed information and examples, see the official documentation: Animate.css .

On scroll animation

hs.onscroll-animation.js plugin allows you to animate objects by triggering .u-in-viewport class, as you scroll down to it.

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                  <link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">

Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable it.

                  <script src="../../assets/vendor/appear.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                    $(document).on('ready', function () {
                      // initialization of animation

Basic example

                  <h1 class=""



JavaScript behavior


                  bounds: -100 - integer
                  debounce: 50 - integer
                  inViewportClass: 'u-in-viewport' - string
                  animation: 'fadeInUp' - string
                  animationOut: false - boolean
                  animationDelay: 0 - integer
                  animationDuration: 1000 - integer


                  afterShow: function(){} - function
                  onShown: function(){} - function
                  onHidden: function(){} - function


Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-in-viewport-class="".

Attribute Description Example value Default value


The class that triggers the plugin when you reach the viewport. u-animated u-in-viewport


Effect of appearance. All available animation classes can be found via animate.css . fadeIn fadeInUp


Delay of animation (ms) that indicates when animation will start after the element hits the viewport. 1000 0


Duration of animation (ms). 500 1000

afterShow: function (invoker) {}

Executes the code inside the body of the function each time it appears.

onShown: function (invoker) {}

Executes the code inside the body of the function each time it is shown.

onHidden: function (invoker) {}

Executes the code inside the body of the function each time it is hidden.
Contact Us