Reveal CSS Animation on Page Scroll – WOW.js

Category: Animation | July 18, 2018
Author: matthieua
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

The Wow.js is a powerful javascript library which builds with animate.css to provide reveal animation on page scroll. It allows animating content, photo, and other HTML elements.

It gives you a lot of options to choose from. You can animate different element at different speed and position. This library is smaller than other Javascript plugins, like Scrollorama. It is super easy to install and fully compatible with animate.css so if you are already using it, that will be very fast to set up.

Reveal HTML Element While Page Scroll

The implementation is just a piece of cake. All you have to load the main Js and animate.css file before the closing header.

<script src="dist/wow.js"></script>
<link rel="stylesheet" href="css/libs/animate.css">

Next, Define different section with unique class according to the animation you want to use.

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

It included some advanced functions such as speed and delay which you can add by simply adding the data attribute.

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

Lets initial the Javascript function.

new WOW().init();

To customize different option, you can change the value as per your requirements.

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
  }
);
wow.init();