Customization

Default Options

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

ScrollReveal(options);

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:

<head>
    <script src="https://unpkg.com/scrollreveal"></script>
    <script>
        ScrollReveal({ reset: true });
    </script>
</head>

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.
</h1>
<p class="tagline">
    The perfect widgets.
    <span class="punchline">Forever.</span>
</p>
ScrollReveal().reveal('.headline');
ScrollReveal().reveal('.tagline', { delay: 500 });
ScrollReveal().reveal('.punchline', { delay: 2000 });

Booyah! Check this one out live on JSBin