Performance focused, lightweight (less than 2.5 kb) scroll animation library, written in vanilla JavaScript. No dependencies!
Sal (Scroll Animation Library) is written with aim to provide performant and lightweight solution for animating elements on scroll. It's based on the Intersection Observer, which gives amazing performance in terms of checking the element's presence in viewport.
# Usage with NPM
$ npm install --save sal.js
# and with Yarn
$ yarn add sal.js
Then load it with your favorite module loader or use as global, when no modules
// ES6 modules
import sal from 'sal.js'
// CommonJS modules
var sal = require('sal.js')
And remember to add styles
// Webpack
@import '~sal.js/sal.css';
// Other
@import './node_modules/sal.js/dist/sal.css';
In HTML, add data-sal
, which value is animation name, e.g.:
<div data-sal="<animation-name>"></div>
Then simply init Sal in your script file:
sal();
It will look for an element with data-sal
attribute and launch animation, when it's in viewport.
With sal.js you can easily change animation's options, by adding a proper data
attribute:
data-sal-duration
- changes animation's durationdata-sal-delay
- adds delay to animationdata-sal-easing
- sets easing for the animation
For example:
<div
data-sal="slide-up"
data-sal-delay='300'
data-sal-easing='ease-out-bounce'
></div>
Library supports several animations:
fade
slide-up
slide-down
slide-left
slide-right
zoom-in
zoom-out
flip-up
flip-down
flip-left
flip-right
Property | Type | Description | Default |
---|---|---|---|
threshold |
Number | Percentage of element's area that needs to be visible to launch animation (see docs) | 0.5 |
once |
Boolean | Defines if animation needs to be launched once | true |
disable |
Boolean | Flag for disabling animations | false |
You can set options during Sal's initialization, e.g.:
sal({
threshold: 1,
once: false,
});
Property | Type | Description | Default |
---|---|---|---|
selector |
String | Selector of element, which should be animated | [data-sal] |
animateClassName |
String | Class name which triggers animation | sal-animate |
disabledClassName |
String | Class name which defines disable state | sal-disabled |
rootMargin |
String | Corresponds to root's bounding box margin (see docs) | 0% 50% |
Method name | Description |
---|---|
enable |
Enables animations |
disable |
Disables animations |
Public methods are available after Sal's initialization:
const scrollAnimations = sal();
scrollAnimations.disable();
Created by MirosΕaw Ciastek. Released under the MIT License.