WOW.js

Temporary deprecation:

wow.js is temporarily deprecated in favour of AOS (Animate on Scroll). Feel free to ignore the warning if you can't use AOS.

Plans for 3.0 include:

Breaking out the shims into an optional module
Using the AOS approach for most functionality
Remain completely backwards compatible and a drop-in replacement for GPL wowjs, but issue warning on durations of higher granularity than 50ms or longer than 3s
Detect Firefox for Android as mobile.

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:

100% MIT Licensed, not GPL keep your code yours.
Naturally Caffeine free
Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)
Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
Fast execution and lightweight code: the browser will like it ;-)
You can change the settings - see below

Documentation

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

Installation

Bower

   bower install wow-mit

   npm install wow.js

Basic usage

HTML

  <section class="wow slideInLeft"></section>
  <section class="wow slideInRight"></section>

JavaScript

new WOW().init();

Advanced usage

HTML

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

JavaScript

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
    },
    scrollContainer: null,    // optional scroll container selector, otherwise use window,
    resetAnimation: true,     // reset animation on end (default is true)
  }
);
wow.init();

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.