Wow.js

Wow.js is a JavaScript library that generates CSS animations as you scroll along any webpage. It integrates CSS3 based animations in the websites. In the default case, you can use these animations by triggering animate.css. It works nicely with animate.css to deliver a great cross-browser experience.

The Animate CSS library is filled with different complete sets of animations available in CSS3. It also integrates jQuery code to provide CSS classes with some templates for animation. If wow.js is integrated with it, you can have more control over the animations. It will also let you know how many times the animations are repeated, the animation's lasting time, the delay animation delivers at every stage of progression, etc.

Advantages of wow.js

It is generally a smaller plugin as compared to any JavaScript parallax plugin like Scrollorama. Scrollorama is used to do some complex dynamic animations, but it is too heavy to use it.

Another advantage of wow.js lies in one of its features. Suppose you opt to use the Animate CSS library. In that case, you can set animation for any HTML element outside the fold. Whenever you scroll down the web page to see that HTML element, the animation might behave completed or finished. Thus, using wow.js with the Animate CSS library, the CSS animations that you miss while you scroll down the page will automatically be started and will be visible. For the sake of illustration, refer to the wow.js library's home page to understand what is being said.

Setup

To set up wow.js in your system, you need to take the help of bower. After installing bower, type the command given below.

Basic usage

To use wow.js in your HTML code, add the following class sections like the example shown below.

To integrate wow.js with a CSS file, add the following code snippet.

For the process to proceed forward, you need to include adding and initializing it with JavaScript. The method is shown as follows.

If you want to link other CSS animations, you need to change the wow.js setting by adding the code snippet below.

The above link doesn't activate the wow.js. To activate this link, you need to add some JavaScript that will do the work.

Revealing animations with CSS

To make any element revealable, you need to add the CSS class. Wow, the method to the required HTML element. It will be added once done, but it will remain invisible. It will be visible only when the page is scrolled down. It is shown below:

Animation Styling

To choose an animation style, you will need to pick up an element from the Animate.css library and add it to the class residing in the HTML element, as shown below:

At this point, whenever you suggest the user scroll, the animation shall be revealed automatically.

Advanced Options

There are more advanced options that you might not be familiar with. In wow.js, some dynamic animation components are used for complex projects. Some of them are discussed below.

Data-wow-duration: duration of the animation is changed.

Data-wow-delay: puts some delay before the animation is started.

Data-wow offset: prescribed distance between components.

Data-wow-iteration gives out the number of times the animation is supposed to repeat.

All of these effects can be shown through the example code snippet given below.

Customize Settings

boxClass: It reveals the class name whenever the user scrolls through the hidden box.

animateClass: It triggers the animations present in the CSS class name.

Offset: It reveals the distance between the hidden box top and the bottom of the browser viewport. In simple words, when you scroll and reach a certain distance on the web page, the distance for the hidden box is immediately revealed.

Mobile: Turn on/off WOW.js on mobile devices.

Live: It constantly checks if the WOW elements exist on the page or not.

All of these customized can be collectively represented in the example code snippet given below.

Summary

Wow.js is just a simple animation library that can be used to import some generic and customized animation into a web page. There are various options apart from using the wow.js library, but if you build an application based on the web platform, it is the best library to create some dynamic animations. In this tutorial, you discovered all the necessary setting and styling techniques that can be carried out with wow.js by collectively collaborating it with your HTML, CSS, and plain JavaScript. Wow.js is also available for other libraries like ReactJS, AngularJS, etc., which will be discussed later.