Reveal

Type: method

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

Signature

function (target, options)

Target

stringCSS selector, matching 1 or more elements.
nodeSingle DOM node.
nodeListCollection of DOM nodes.
Array<node>Array of DOM nodes.

Options

objectOptions to use instead of the defaults.

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.