Hello World

What is ScrollReveal?

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.

Quick Start

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.

Too easy. See this demo live on JSBin

Keep Going!

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!