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.1.2

Documentation

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

Dependencies

Basic usage

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

Advanced usage

1
2
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    }
  }
);
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

1
wow.init()
. If you do not like that, you can disable this by setting
1
live
to
1
false
.

If you want to support older browsers (e.g. IE9+), as a fallback, you can call the

1
wow.sync()
method after you have added new DOM elements to animate (but
1
live
should still be set to
1
true
). Calling
1
wow.sync()
has no side effects.

Contribute

The library is written in CoffeeScript, please update

1
wow.coffee
file.

We use grunt to compile and minify the library:

Install needed libraries

1
npm install

Get the compilation running in the background

1
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