Animate HTML elements on page scroll with animate CSS

A scroll down animation helps in managing the content flow that is being displayed to the user and it makes sure that the important content is shown appropriately and attractively to the users. Animations are basically used to capture the user's attention and it creates a reference point that denotes importance. 

Using Animate.css you can create a lot of visually appealing effects that can really attract a user's eye and make a great user experience.

In this blog, I will show you how to add animations to your HTML elements using animate CSS in few simple steps.

Add CSS Animation

The very first thing we have to do is to hook up the animate.css file to the project. You can copy the minified version of the file from the following link.

Animate.css

Hookup JavaScript Scroll Timing

Now we need to add one more file to have a control on the timing of the elements. This file help in animate the elements when they enter the viewport when we scroll down the page as otherwise the animation would just happen at the page load and we wouldn't ever see them.

You can use the minified version of this file as well. Just click on the following link:

wow.js

Add this file directly using the link or by making an external js and adding it to your index.html file using script tag.

Once you added this script file, you need to initiate the script with the following code:

new WOW().init();

Apply Animations on HTML Elements

Now after following the above steps successfully, it's time for the fun part, that is, adding the animations to our HTML elements. It is as simple as adding CSS classes to HTML tags. For that, you first need to add the class wow and then the name of one of the following the animation as a class.

bounce, flash, pulse, rubberBand, shake, swing, tada, jello etc.

The complete list of animations you can find here:

https://daneden.github.io/animate.css/

That's all it takes to get the user's attention and to make your page user-friendly.

THANKS