bruno-barros / sal

🚀 Performance focused, lightweight scroll animation library 🚀

Sal

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.

Table of Contents

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

Install

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

Usage

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.

Animations

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

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

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 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 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%

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.