mciastek/sal

Sal (short for Scroll Animation Library) is a small JavaScript library that makes elements on a webpage animate as visitors scroll down to see them. The entire library weighs less than 2.8 kilobytes and has no outside dependencies, meaning you add one file and a stylesheet to your project and it is ready to use. The setup is minimal. You add a data attribute to any HTML element you want to animate, specify which animation type to use (such as fade, slide-up, or zoom-in), and call the library once in your script. It then watches the page and triggers the chosen animation whenever that element scrolls into view. Eleven animation types are available: fade, four slide directions, two zoom directions, and four flip directions. You can fine-tune each animation using additional data attributes: one controls duration (from 200 to 2000 milliseconds), another adds a delay before the animation starts, and a third controls the motion curve. CSS custom properties can be used as an alternative if you prefer to manage these values from a stylesheet rather than inline attributes. By default, each animation plays once. You can change this globally so animations repeat every time an element enters and exits view, or override the behavior on individual elements. The library also fires events when elements enter or leave the viewport, so you can attach your own code to react to those moments. Under the hood, Sal uses the browser's Intersection Observer API rather than scroll event listeners, which keeps CPU usage low even on pages with many animated elements. It is released under the MIT license.