Declarative On-scroll Reveal Animations – scrollReveal.js

Category: Animation , Javascript , Recommended | November 27, 2018
Author: julianlloyd
Views Total: 6,179
Official Page: Go to website
Last Update: November 27, 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>

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.5 (2018-11-27)

  • Bugfixed

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