Install Sal In These Easy To Follow Steps

Sal.js is a simple and lightweight scroll animation library, which is written in straight JavaScript, without any dependencies whatsoever.
Less than 3 KB large, Sal, which is short for "Scroll Animation Library," allows you to animate UI elements when users scroll their screens. The code is based upon Mozilla's Intersection Observer API, which makes the library extra fast. Though keep in mind that the API is still in an experimental phase and is not yet supported on all browsers. Installing Sal.js
You can install Sal.js by using one of the following commands:
$ npm install --save sal.js
$ yarn add sal.js
After installing Sal, use the following commands in your source file to import the library:
import sal from 'sal.js'
var sal = require('sal.js')
You also need to import the following style sheets:
@import '~sal.js/sal.css';
@import './node_modules/sal.js/dist/sal.css'; Setting Up Sal.js
To set up Sal, first you need to create a data-sal div container in your HTML file. You must also specify the type of scroll animation you would like. For example:
Then, initialize Sal in your script by using the following command:
sal(); Animating with Sal.js
Sal supports the following base animation types: fade slide-up slide-down slide-left slide-right zoom-in zoom-out flip-up flip-down flip-left flip-right
You can further customize the animation by adding a data attribute to the container definition. You have the following options: data-sal-duration: The animation length. data-sal-delay: The amount of animation delay. data-sal-easing: The amount of animation easing.
For example:
You can also use the following options in your initialization code: threshold: the amount of visible area required to trigger the animation. once: whether or not animation happens only once. disable: whether or not to disable the library.
You can further enable or disable the library in your code by using either the enable() or disable() methods. For example:
const scrollAnimation = sal();
scrollAnimation.disable(); For more information click here https://github.com/mciastek/sal.