Trigger Fade/Flip/Zoom Animations On Scroll – Scrollrisen

Category: Animation , Javascript | March 30, 2021
Author: bojan30
Views Total: 328 views
Official Page: Go to website
Last Update: March 30, 2021
License: MIT

Preview:

Trigger Fade/Flip/Zoom Animations On Scroll – Scrollrisen

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'
});

You Might Be Interested In:


Leave a Reply