Tiny Performant Scroll Based Animation Library – sal

Category: Animation , Javascript | January 11, 2020
Author: mciastek
Views Total: 1,324 views
Official Page: Go to website
Last Update: January 11, 2020
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,
  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

You Might Be Interested In:


Leave a Reply