WOW.js


WOW.js Build Status

Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Advantages:

Follow @mattaussaguel for updates as WOW evolves.

LIVE DEMO ➫

Live examples

Version

1.0.1

Documentation

It just take seconds to install and use WOW.js! Read the documentation ➫

Dependencies

Basic usage

  <section class="wow slideInLeft"></section>
  <section class="wow slideInRight"></section>
new WOW().init();

Advanced usage

  <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>
var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true        // act on asynchronously loaded content (default is true)
  }
);
wow.init();

Asynchronous content support

In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically triggered for any DOM nodes you add after calling wow.init(). If you do not like that, you can disable this by setting live to false.

If you want to support older browsers (e.g. IE9+), as a fallback, you can call the wow.sync() method after you have added new DOM elements to animate (but live should still be set to true). Calling wow.sync() has no side effects.

Contribute

The library is written in CoffeeScript, please update wow.coffee file.

We use grunt to compile and minify the library:

Install needed libraries

npm install

Get the compilation running in the background

grunt watch

Enjoy!

Bug tracker

If you find a bug, please report it here on Github!

Developer

Developed by Matthieu Aussaguel, mynameismatthieu.com

Contributors

Thanks to everyone who has contributed to the project so far:

Initiated and designed by Vincent Le Moign, @webalys