Tiny Performant Scroll Based Animation Library – sal

Category: Animation , Javascript | September 18, 2018
Author: mciastek
Views Total: 1,063
Official Page: Go to website
Last Update: September 18, 2018
License: MIT

Preview:

Tiny Performant Scroll Based Animation Library – sal

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();

You Might Be Interested In:


Leave a Reply