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
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.
To set up wow.js in your system, you need to take the help of bower. After installing bower, type the command given below.
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.
If you want to link other CSS animations, you need to change the wow.js setting by adding the code snippet below.
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:
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.
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.
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.