Trigger Fade/Flip/Zoom Animations On Scroll – Scrollrisen

Category: Animation , Javascript | March 30, 2021
Views Total:823 views
Official Page:Go to website
Last Update:March 30, 2021


Trigger Fade/Flip/Zoom Animations On Scroll – Scrollrisen


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 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.

  // 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.

   * 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'

You Might Be Interested In:

Leave a Reply