Author: | mciastek |
---|---|
Views Total: | 814 views |
Official Page: | Go to website |
Last Update: | May 2, 2021 |
License: | MIT |
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({ root: null, 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.8.5 (05/02/2021)
- Added root option