Scroll Reveal

Easy scroll animations for web and mobile browsers.

GitHub Scroll Reveal

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 = ScrollReveal();


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 = 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:
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) {}