Trigger Fade/Flip/Zoom Animations On Scroll – Scrollrisen

Preview:

Description:

Scrollrisen is a tiny AOS (Animate On Scroll) JavaScript library that triggers CSS3 powered fade, flip, or zoom animations on elements as they scroll into view.

How to use it:

1. Install and import the Scrollrisen.

# Yarn
$ yarn add scroll-risen
# NPM
$ npm i scroll-risen

import scrollrisen from 'scroll-risen/dist/scrollrisen.js'
import 'scroll-risen/dist/scrollrisen.css'

2. Or directly import the following files into the document.

<link rel="stylesheet" href="dist/css/scrollrisen.css" />
<script src="dist/js/scrollrisen.js"></script>

3. Initialize the Scrollrisen and we’re ready to go.

scrollrisen.init({
  // options here
});

4. Apply an animation to your element using the data-sr attribute. All available animation names:

• fade: simple fade
• fade-l: fade from left
• fade-r: fade from right
• fade-t: fade from top
• fade-b: fade from bottom
• fade-t-l: fade from top left
• fade-t-r: fade from top right
• fade-b-l: fade from bottom left
• fade-b-l: fade from bottom left
• fade-b-r: fade from bottom right
• flip-l: flip from left
• flip-r: flip from right
• flip-t: flip from top
• flip-b: flip from bottom
• zoom: center zoom
• zoom-l: zoom from left
• zoom-r: zoom from right
• zoom-t: zoom from top
• zoom-b: zoom from bottom

<div class="box" data-sr="fade-l">Fade</div>
<div class="box" data-sr="flip-r">Flip</div>
<div class="box" data-sr="zoom">Zoom</div>

5. Default configurations.

scrollrisen.init({
  /**
   * easing function
   */
  easing: 'ease',
  /**
   * animation duration in ms
   */
  duration: 2000,
  /**
   * animation trigger point(where is the top of the element relative to viewport), 0,5 means center
   */
  trigger: 0.2,
  /**
   * should animation go in reverse when element is below the viewport
   */
  reverse: true,
  /**
   * how often should scroll handler be called in ms
   */
  debounce: 16,
  /**
   * active class applied to elements in viewport
   */
  activeClass: '_sr-active'
});