Scroll Reveal

Easy scroll animations for web and mobile browsers.

The Basics

Add the class .reveal to start default method reveal(). Standard animation is fade in from the left.

<elem class="reveal">

Using data attributes

Use data-sr-* attributes to change the default animation. See default configuration below.

<elem class="reveal" data-sr-origin="top" data-sr-duration="1000" data-sr-scale="0.5">

<elem class="reveal" data-sr-origin="right" data-sr-easing="ease-out" data-sr-reset="true">

// data attribute || default
'data-sr-origin' || 'left',
'data-sr-duration' || 500,
'data-sr-delay' || 0,
'data-sr-scale' || 0.9,
'data-sr-opacity' || 0,
'data-sr-distance' || '20px',
'data-sr-easing' || 'cubic-bezier(0.6, 0.2, 0.1, 1)',
'data-sr-reset' || false

Using Javascript

The reveal() method is the primary API, and makes it easy to create and manage various types of animations.

<!-- HTML -->
<div class="foo"> Foo </div>
<div class="bar"> Bar </div>

// JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

Configuration

Passing a configuration object to ScrollReveal() changes the defaults for all reveals, and passing reveal() a configuration object customizes that reveal set further.

// Changing the defaults
window.sr = ScrollReveal({ reset: true });

// Customizing a reveal set
sr.reveal('.foo', { duration: 200 });

The Starting Defaults

// 'bottom', 'left', 'top', 'right'
origin: 'bottom', 

// Time in milliseconds.
duration: 500,  
delay: 0,

// Starting opacity value, before transitioning to the computed opacity.
opacity: 0,

// Starting scale value, will transition from this value to 1
scale: 0.9, 

// Valid CSS distance: '5rem', '10%', '20vw', '30vh', etc.
distance: '20px', 

 // Starting angles in degrees.
rotate: { x: 0, y: 0, z: 0 },

// Valid CSS easing: 'ease-in-out', 'linear', etc.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)', 

// <html> is the default. You can pass: document.querySelector('.container') or '.container'
container: window.document.documentElement,

// true/false to control reveal animations on mobile.
mobile: true, 

// true:  reveals occur every time elements become visible
// false: reveals occur once as elements become visible
reset: false, 

// 'always' — delay for all reveal animations
// 'once'   — delay only the first time reveals occur
// 'onload' - delay only for animations triggered by first load
useDelay: 'always', 

// of 0.20 means 20% of an element must be visible for its reveal to occur.
viewFactor: 0.2, 

// Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },

// Callbacks that fire for each triggered element reveal, and reset.
beforeReveal: function (domEl) {},
beforeReset: function (domEl) {},

// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}