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!
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.
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.
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:
html.sr .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.
</h1>
ScrollReveal().reveal('.headline');
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>
</ul>
We can use the same strategy, but by extending an existing class, e.g:
html.sr .widget {
visibility: hidden;
}