Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies!

Sal (Scroll Animation Library) was created to provide a 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 the viewport.

Note: Intersection Observer API is an experimental technology so be sure to consult the browser compatibility table and consider using a polyfill.

• Install
• Usage
• Animations
• Options
• API
• License

# Usage with NPM
$ npm install --save sal.js

# and with Yarn
$ yarn add sal.js

Load it with your favorite module loader or use as a global variable

// 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 a data-sal attribute with the animation name as value, e.g.:

<div data-sal="fade"></div>

Then simply initialize Sal in your script file:

sal();

It will look for all elements with a data-sal attribute and launch their animation when in viewport.

In sal.js you can easily change animation's options, by adding a proper data attribute:

• data-sal-duration - changes duration of the animation
• data-sal-delay - adds delay to the animation
• data-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>

The 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

You can set options during Sal's initialization, e.g.:

sal({
  threshold: 1,
  once: false,
});

Public methods are available after Sal's initialization:

const scrollAnimations = sal();

scrollAnimations.disable();

Created by Mirosław Ciastek. Released under the MIT License.