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 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%`
`enterEventName`	String	Enter event name (see Events)	`sal:in`
`exitEventName`	String	Exit event name (see Events)	`sal:out`

API

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

Public methods are available after Sal's initialization:

const scrollAnimations = sal();  scrollAnimations.disable();

Events

This library supports events, fired when element is entering or exiting viewport (they are named sal:in and sal:out by default). Property detail is IntersectionObserverEntry object.

You can attach listener to specific element.

// Get element with ".animated" class, which has "data-sal" attribute const element = document.querySelector('.animated');  element.addEventListener('sal:in', ({ detail }) => {   console.log('entering', detail.target); });

or to the whole document

document.addEventListener('sal:out', ({ detail }) => {   console.log('exiting', detail.target); });

License

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

Sal.js : Lightweight Scroll Animation library

Sal

Table of Contents