User Experience

Less Is More

First and foremost, please exercise restraint. ScrollReveal was designed to be easy to use—but that makes it easy to over-use. Too many animations quickly cheapen the effect, and can easily become a nuisance!

Prevent Flickering

Many developers put their <script> tags just before the closing </body> tag, allowing document content to begin rendering before scripts are finished loading. Generally this is good for performance, but in this case, it also means content can be visible for a brief moment before ScrollReveal takes over.

A great internet connection and/or browser caching can mask this problem, but this approach can create a very noticeable flicker. Below we’ll explore a few steps we can take to fix this.

Ensure that ScrollReveal is included in the <head>

This ensures ScrollReveal will be installed before <body> content begins rendering. This helps us because ScrollReveal will add the class sr to <html> upon successful installation.

Create a CSS ruleset that depends on <html class="sr"> and uses visibility: hidden; to hide elements.

Utility Class

One way we can do this is with a utility class; you can use whatever name you like, here we’ve used .load-hidden e.g: .load-hidden {
    visibility: hidden;

This is a “ScrollReveal-only” CSS ruleset. When ScrollReveal is disabled/not supported (or JavaScript is disabled), it will have no effect—so we can safely attach it to our reveal target, e.g:

<h1 class="headline load-hidden">
    Widget Inc.

Style Extension

In some cases, adding utility classes may not suit your project. Let’s say we’re working with a long list of items, e.g:

<ul class="widget-list">
    <li class="widget">1</li>
    <li class="widget">2</li>
    <li class="widget">3</li>
    <li class="widget">4</li>
    <li class="widget">5</li>

We can use the same strategy, but by extending an existing class, e.g: .widget {
    visibility: hidden;

See the complete demo live on JSBin