SAL JS

Sal Js

Sal (Scroll Animation Library) was created to provide a performant and lightweight solution for animating elements on scroll.

Animations

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

  • data-sal-duration – changes the 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
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,
});
License

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

Demo File Sal.js

You May Also Like

API

neumorphism

Neumorphism in user interfaces

SASS

CSS Grid Example

Leave a Reply

Your email address will not be published. Required fields are marked *