Default Options

When calling ScrollReveal(), you can pass it an options object to change the default configuration.


Fresh out of the box, ScrollReveal runs with these defaults. This configuration is intentionally barebones, to serve as a blank canvas for your creativity!

You can do this as many times as you need, although just once in the <head> after installation is typically enough for most projects, e.g:

    <script src=""></script>
        ScrollReveal({ reset: true });

Reveal Options

When calling the reveal() method, you can also pass it an options object. This will override the current default configuration, for that reveal target only.

ScrollReveal().reveal(target, options);

This is your bread and butter! Target elements in your document, and specify options to create your reveal animations, e.g:

<h1 class="headline">
    Widget Inc.
<p class="tagline">
    The perfect widgets.
    <span class="punchline">Forever.</span>
ScrollReveal().reveal('.tagline', { delay: 500 });
ScrollReveal().reveal('.punchline', { delay: 2000 });

Booyah! Check this one out live on JSBin