Skip to content
/ sal Public
forked from mciastek/sal

πŸš€ Performance focused, lightweight scroll animation library πŸš€

License

Notifications You must be signed in to change notification settings

nimafam/sal

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

51 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Sal npm version License: MIT Build Status

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.

Table of Contents

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.

About

πŸš€ Performance focused, lightweight scroll animation library πŸš€

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 70.0%
  • JavaScript 18.1%
  • CSS 11.9%