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,
  enterEventName: 'sal:in'
  exitEventName: 'sal:out'
});

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

const instance = sal({
      // options here
});
instance.enable();
instance.disable();
instance.reset();

Event handlers.

const element = document.querySelector('.animated');
element.addEventListener('sal:in', ({ detail }) => {
  console.log('entering', detail.target);
});
document.addEventListener('sal:out', ({ detail }) => {
  console.log('exiting', detail.target);
});

Changelog:

v0.7.1 (01/11/2020)

• Added method to reset Sal’s instance and provide new settings

v0.6.5 (12/12/2019)

• Add support for using sal.js in SSR