Declarative On-scroll Reveal Animations – scrollReveal.js

Category: Animation , Javascript , Recommended | March 4, 2021
2 Comments
Demo Download
Author:julianlloyd
Views Total:12,003 views
Official Page:Go to website
Last Update:March 4, 2021
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>

Create an element you want to animate.

<h1 class="demo">scrollReveal.js</h1>
<p class="demo">Declarative on-scroll reveal animations.</p>

Initialize with default settings.

ScrollReveal().reveal('.headline')

All Default settings and callback functions.

ScrollReveal({
  // 'bottom', 'left', 'top', 'right'
  origin: 'bottom',
  // Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
  distance: '0',
  // Time in milliseconds.
  duration: 600,
  delay: 0,
  interval: 0,
  cleanup: false
  // 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: 1,
  // Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
  easing: 'cubic-bezier(0.5, 0, 0, 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 desktop.
  desktop: true,
  // 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.0,
  // 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) {}
})

API methods.

// Reverses the effects.
ScrollReveal().clean('.demo');
// Invokes all previous reveal() calls (with the appropriate arguments), to capture any new elements added to the DOM.
ScrollReveal().reveal('.demo', { //options });
// Destroys the instance.
ScrollReveal().destroy();

Changelog:

v4.0.9 (2021-03-04)

  • Bugfixed

See Also:

You Might Be Interested In:

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