Declarative On-scroll Reveal Animations – scrollReveal.js

Category: Animation , Javascript , Recommended | June 13, 2018
Author: julianlloyd
Views Total: 5,151
Official Page: Go to website
Last Update: June 13, 2018
License: MIT

Preview:

Declarative On-scroll Reveal Animations – scrollReveal.js

Description:

scrollReveal.js is a simple yet amazing javascript library that reveals invisible HTML elements with fade-in transitions while you scroll down the page and the invisible HTML elements are in the viewport.

How to use it:

Include the necessary scrollReveal.js library at the end of the document.

<script src="scrollReveal.js"></script>

Each Html element accepts a data-scrollreveal attribute to animate it individually.

<h1 data-scrollreveal="enter from the top over 1.5s">scrollReveal.js</h1>
<p data-scrollreveal="enter bottom but wait 1s">Declarative on-scroll reveal animations.</p>

Initialize with default settings.

window.scrollReveal = new scrollReveal();

All Default settings and callback functions.

// '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) {}

Changelog:

v3.4.0 (2018-06-13)

  • The reveal() method now supports native arrays as target argument.

2 thoughts on “Declarative On-scroll Reveal Animations – scrollReveal.js

  1. Dariel

    Hi, pretty good tool. Here I leave another tool that allows handling animations declaratively, http://anijs.github.io/, using it you can work with many events, not just scrolling.

    Reply

Leave a Reply