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('.headline');
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('.headline');
ScrollReveal().reveal('.tagline', { delay: 500 });

Module-Friendly

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('.headline');
sr.reveal('.tagline', { delay: 500 });

ScrollReveal 4 removes the need for the wrapper module.

// v4
import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.headline');
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 });

New methods

clean()

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

destroy()

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

New Options

options.desktop

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

options.interval

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

New Licensing

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.