Advanced (v3.x)

Sequenced Animations

You can pass a sequence interval (in milliseconds) to the reveal() method, making sequenced animations a breeze.

Note: The interval is the time until the next element in the sequence begins its reveal, which is separate from the time until the element’s animation completes. In this example, the animation duration is 2 seconds, but the sequence interval is 50 milliseconds.

// interval passed to reveal
window.sr = ScrollReveal({ duration: 2000 });
sr.reveal('.box', 50);

// or...

// interval and custom config passed to reveal
window.sr = ScrollReveal();
sr.reveal('.box', { duration: 2000 }, 50);

Working With DOM Nodes

You may also pass Node, NodeList and Array<Node> as the reveal target.

var node = document.querySelector('.foo');
var nodeList = document.querySelectorAll('.bar');
var array = Array.prototype.slice.call(nodeList);

sr.reveal(node);
sr.reveal(nodeList);
sr.reveal(array);

Custom/Multiple Containers

The default container is the viewport, but you can assign any container to any reveal set.

Tip: ScrollReveal works just as well with horizontally scrolling containers too!

<div id="fooContainer">
  <div class="foo"> Foo 1 </div>
  <div class="foo"> Foo 2 </div>
  <div class="foo"> Foo 3 </div>
</div>

<div id="barContainer">
  <div class="bar"> Bar 1 </div>
  <div class="bar"> Bar 2 </div>
  <div class="bar"> Bar 3 </div>
</div>

window.sr = ScrollReveal();

// as a DOM node...
var fooContainer = document.getElementById('fooContainer');
sr.reveal('.foo', { container: fooContainer });

// as a selector...
sr.reveal('.bar', { container: '#barContainer' });

Asynchronous Content

The sync() method updates asynchronously loaded content with any existing reveal sets.

Example:

<!-- index.html -->
<div id="fooContainer">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>

<!-- ajax.html -->
<div class="foo">foo async</div>
<div class="foo">foo async</div>
<div class="foo">foo async</div>

var fooContainer, content, sr, xmlhttp;

fooContainer = document.getElementById('fooContainer');

sr = ScrollReveal();
sr.reveal('.foo', { container: fooContainer });

// Setup a new asynchronous request...
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {
    if (xmlhttp.status == 200) {

      // Turn our response into HTML...
      var content = document.createElement('div');
      content.innerHTML = xmlhttp.responseText;
      content = content.childNodes;

      // Add each element to the DOM...
      for (var i = 0; i < content.length; i++) {
        fooContainer.appendChild(content[ i ]);
      };

      // Finally!
      sr.sync();
    }
  }
}

xmlhttp.open('GET', 'ajax.html', true);
xmlhttp.send();