HTML Elements Scroll Reveal Animations

Using scrollReveal.js, you can simply create animated HTML elements that fade-in, from all sides and over a certain amount of time. The animations you create are only triggered when the end user scrolls the web page.

Install scrollReveal.js

You can install scrollReveal.js in three (3) different ways. The first way is to simply download it and upload it to your hosting account. The second way is to use Git:

git clone

The third way is to use Bower:

bower install scrollReveal.js

Once you have it on your hosting account, you can add it to your website like so:

http://path-to-file/scrollReveal.min.js  window.scrollReveal = new scrollReveal(); 

Make sure you change path-to-file with the path to the JavaScript file.

How-to Use scrollReveal.js

To use scrollReveal.js, simply add data-scroll-reveal to the HTML element:

<h1 data-scroll-reveal>You Are Using scrollReveal.js</h1>

You Are Using scrollReveal.js

You can also add keywords and keyword values to the data-scroll-reveal attribute.


Enter from the top, left, bottom or right.

You Are Using scrollReveal.js




Move a certain amount of pixels (px).

You Are Using scrollReveal.js




The duration, in seconds, of your reveal animation.

You Are Using scrollReveal.js




The duration, in seconds, before the reveal animation begins.

You Are Using scrollReveal.js



Combine Different Keywords

You can also combine keywords and their values using a comma , or using filler words: from, the, and, then, but, with.

An example of combining keywords and their values would look like this:

You Are Using scrollReveal.js


You Are Using scrollReveal.js


Note: You can also add CSS classes to the HTML element like I have done in the examples.