Tiny Performant Scroll Based Animation Library – sal

Preview:

Description:

sal is a lightweight, high-performant scroll animation library used for animating elements within the document on page scroll.

The library automatically applies certain animation class(es) to desired elements when a specific part of the elements are visible within the viewport.

How to use it:

Install & Download.

# Yarn
$ yarn add sal.js

# NPM
$ npm install sal.js --save

Import the sal.js.

// ES 6
import sal from 'sal.js';

// CommonJS:
const sal = require('sal.js');

Or include the compiled JavaScript & CSS files on the page.

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

Initialize the sal.js library and you’re ready to go.

sal();

Add the data-sal attribute to the target element and specify the animation name you want to use as follows:

• fade
• slide-up
• slide-down
• slide-left
• slide-right
• zoom-in
• zoom-out
• flip-up
• flip-down
• flip-left
• flip-right

<div data-sal="zoom-in">Element To Animate</div>

Set the duration, easing, delay of the animation.

<div data-sal="zoom-in"
     data-sal-duration="2000"
     data-sal-delay="500"
     data-sal-easing="ease-out-bounce">
     Element To Animate
</div>

Configuration options available.

sal({
  rootMargin: '0% 50%',
  threshold: 0.5, // 50%
  animateClassName: 'sal-animate',
  disabledClassName: 'sal-disabled',
  selector: '[data-sal]',
  once: true, // run only once
  disabled: false,
});

API methods which can be used to disable/enable the scroll animation manually.

const instance = sal({
      // options here
});

instance.enable();
instance.disable();