Sal

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

Install

# 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';

Usage

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.

Animations

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

Options

Property	Type	Description	Default
`threshold`	Number	Percentage of an 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,
});

Advanced options

Property	Type	Description	Default
`selector`	String	Selector of the elements to be animated	`[data-sal]`
`animateClassName`	String	Class name which triggers animation	`sal-animate`
`disabledClassName`	String	Class name which defines the disabled state	`sal-disabled`
`rootMargin`	String	Corresponds to root's bounding box margin (see docs)	`0% 50%`

API

Method name	Description
`enable`	Enables animations
`disable`	Disables animations

Public methods are available after Sal's initialization:

const scrollAnimations = sal();

scrollAnimations.disable();

License

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

thetoke / sal

Sal

Table of Contents