Reveal

bound function

Registers the target element(s) with ScrollReveal, generates animation styles, and attaches event listeners to manage when styles are applied.

Signature

function (target, options)

Usage

It's common to combine an options object with a CSS selector reveal target:

var slideUp = {
    distance: '150%',
    origin: 'bottom',
    opacity: null
};

ScrollReveal().reveal('.slide-up', slideUp);

You can also work directly with DOM nodes in a few ways:

var node = document.querySelector('#cake');
var nodeList = document.querySelectorAll('.cookies');
var nodeArray = [
    document.querySelector('#pie'),
    document.querySelector('#spoon'),
    document.querySelector('#ice-cream')
];

ScrollReveal().reveal(node);
ScrollReveal().reveal(nodeList);
ScrollReveal().reveal(nodeArray);

Caveats

If you call reveal() on an element more than once, the options passed in will be applied on top of the existing configuration, instead of the defaults.

ScrollReveal().reveal('.item', { delay: 250 });
ScrollReveal().reveal('.item', { duration: 500 });
ScrollReveal().reveal('.item', { delay: 375, reset: true });

// Is the same as...

ScrollReveal().reveal('.item', {
    delay: 375,
    duration: 500,
    reset: true
});

The only exception to this behavior is options.interval, which will only use the value you pass it, or the default. This is because elements can only be a part of one sequence at a time.