Easy scroll animations for web and mobile browsers.
- 3.3KB minified and Gzipped
- No dependencies
- From @jlmakes
1. Getting Started
1.1. Installation
The simplest method is to copy paste this snippet just before your closing </body> tag.
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
But you can also:
- Download ZIP
npm install scrollrevealbower install scrollreveal
1.2. The Basics
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');
2. Configuration
Passing a configuration object to ScrollReveal() changes the defaults for all reveals, and passing reveal() a configuration object customizes that reveal set further.
2.1. Practical Example
// Changing the defaults
window.sr = ScrollReveal({ reset: true });
// Customizing a reveal set
sr.reveal('.foo', { duration: 200 });
2.2. The Starting Defaults
// 'bottom', 'left', 'top', 'right'
origin: 'bottom',
// Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
distance: '20px',
// Time in milliseconds.
duration: 500,
delay: 0,
// Starting angles in degrees, will transition from these values to 0 in all axes.
rotate: { x: 0, y: 0, z: 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,
// Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
// `<html>` is the default reveal container. You can pass either:
// DOM Node, e.g. document.querySelector('.fooContainer')
// Selector, e.g. '.fooContainer'
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',
// Change when an element is considered in the viewport. The default value
// of 0.20 means 20% of an element must be visible for its reveal to occur.
viewFactor: 0.2,
// Pixel values that alter the container boundaries.
// e.g. Set `{ top: 48 }`, if you have a 48px tall fixed toolbar.
// --
// 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) {}
3. Advanced
3.1. 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);
