Javascript To Animate Html Elements On Scroll – WOW.js

WOW.js is an amazing javascript script that takes advantage of CSS3 animations to animate & reveal Html elements when they’re scrolled into view.

Basic Usage:

Load the required animate.css for CSS3 animations.

<link rel="stylesheet" href="css/libs/animate.css">

Create html elements you want to animate on scroll down.

<div id="main">
<section class="wow fadeInDown"></section>
<section class="wow pulse" data-wow-iteration="infinite" data-wow-duration="1500ms"></section>
<section class="wow slideInRight" data-wow-delay="2s"></section>
<section class="wow bounceInLeft" data-wow-offset="300"></section>
<section class="wow slideInLeft" data-wow-duration="4s"></section>
</div>

Load the wow.js at the end of the document so the page load faster.

<script src="dist/wow.js"></script>

Initialization with optional settings.

wow = new WOW(
{
boxClass:     'wow', 
animateClass: 'animated',
offset:       100
}
);
wow.init();

All default options.

var wow = new WOW({
    // selector
    boxClass: 'wow', 
    // animate class
    animateClass: 'animated',
    // offset in pixels
    offset: 0,
    // triggers animations on mobile devices
    mobile: true,
    // acts on asynchronously loaded content
    live: true,       
    // callback function that will be triggered every time an animation is started
    callback:     function(box) {
    },
    // scroll container selector
    scrollContainer: null 
    
  });