Sync

bound function

Invokes all previous reveal() calls (with the appropriate arguments), to capture any new elements added to the DOM.

Signature

function ()

Usage

Invoking sync() is simple because it takes no arguments. What we need, is to explore why and when to use it. Let’s start by assuming we have this on our website somewhere:

ScrollReveal().reveal('.squares', { mobile: false });

We‘ve used a selector and custom options, and it’s working great!

Now imagine we’ve loaded new '.squares' onto our page using some other JavaScript. Even though our new elements match our reveal target, they won’t be noticed by ScrollReveal automatically. How do we fix this?

We could manually invoke reveal() again, sometime after our new '.squares' are added to the DOM:

ScrollReveal().reveal('.squares', { mobile: false });

// The wrong way...
loadMore('.squares').then(function () {
    ScrollReveal().reveal('.squares', { mobile: false });
});

But this isn’t ideal because we’re responsible for passing the same arguments, and we're repeating ourselves. Imagine how this would only get worse as we add more reveals.

This is where sync() comes in:

ScrollReveal().reveal('.squares', { mobile: false });

// Nice!
loadMore('.squares').then(function () {
    ScrollReveal().sync();
});

Clean and simple. Now our asyncronously loaded '.squares' will also reveal.