What’s New

Developer Experience

ScrollReveal has never supported multiple instances. It relies on a single source of truth. This put responsibility on the v3 developer to manage their own instance. For many developers that meant assigning it to window.sr

// v3
window.sr = new ScrollReveal();

sr.reveal('.tagline', { delay: 500 });

ScrollReveal 4 takes a different approach and manages things for us. This means developers only need to call ScrollReveal() to access the instance, e.g:

// v4
ScrollReveal().reveal('.tagline', { delay: 500 });


When working with CommonJS and ES2015 modules, it was common to need a wrapper module to export the ScrollReveal instance, e.g:

// sr.js
import ScrollReveal from 'scrollreveal';

export default new ScrollReveal();
// module.js
import sr from './sr';

sr.reveal('.tagline', { delay: 500 });

ScrollReveal 4 removes the need for the wrapper module.

// v4
import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.tagline', { delay: 500 });

Sequencer Overhaul

The biggest challenge with past sequencers has been defining how to behave with options.reset as true. It’s been difficult creating something that feels right, but the ScrollReveal 4 sequencer is a breakthrough! 🎉

ScrollReveal().reveal('.tile', { interval: 16, reset: true });
Play with this demo live on Codepen

New methods


  • Reverses the effects of a reveal() call, removing the styles and event listeners from target element(s).


  • Reverses the effects of all reveal() calls, removing all generated style, event listeners, and clears the ScrollReveal store.

New Options


  • Default Value: true
  • Enables/disables animations on desktop browsers.


  • Default Value: 0
  • The time (in milliseconds) between reveal animations.
  • Formerly an optional argument of reveal()

New Licensing


For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a Commercial License

Open Source

Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.

If you have already received a copy of ScrollReveal with a different license, your use of that version of ScrollReveal is still governed by that license.

Critical API Changes

reveal() no longer accepts the interval parameter. Instead, sequence intervals are now defined with options.interval.

During the sequencer overhaul, it became clear that optional nature of the interval parameter was unnecessarily confusing. It now lives with all the other options.

// v3
window.sr = new ScrollReveal();
sr.reveal('.tile', { reset: true }, 16);
// v4
ScrollReveal().reveal('.tile', { reset: true, interval: 16 });

options.distance now only supports em px and % values.

Under the hood, ScrollReveal now uses a single matrix3d() to power animations. This helps not clobber any existing CSS transform styles. It also means for now, ScrollReveal only understands a few unit types.