ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
Let’s open a fresh JSBin sandbox in another tab, and include ScrollReveal:
<script src="https://unpkg.com/scrollreveal"></script>
This provides us with the constructor function ScrollReveal(). Calling this function returns the ScrollReveal instance, the “brain” behind the magic.
ScrollReveal employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.
There’s a lot we can do with this instance, but most of the time we’ll be using the reveal() method to create animation. Fundamentally, this is how to use ScrollReveal:
<h1 class="headline">
Widget Inc.
</h1>
ScrollReveal().reveal('.headline');
The rest of this guide will cover important details and tips, so please make sure to read through it all—it doesn’t take long!