💠
Sal logo

Sal

animation

Sal is a performance-focused, lightweight scroll animation library that makes it easy to add dynamic animations to your web elements as they enter the viewport. With a minimal package size of less than 2.8 kb, it operates without any dependencies, ensuring a streamlined user experience.Built using the Intersection Observer API, Sal efficiently detects when elements are visible on the screen and triggers animations accordingly. This API allows for optimal performance, significantly reducing the overhead associated with monitoring scroll events.Integration is simple: by adding a `data-sal` attribute to HTML elements, developers can specify the desired animation effect. Options such as duration, delay, and easing can be customized using additional data attributes or CSS variables, giving complete control over the animation behavior. Supported animations include effects like fade, slide, zoom, and flip, among others.Sal also provides advanced features, allowing for options to be modified after initialization, enabling responsiveness and adaptability based on user interaction. It includes support for event listeners to handle when elements enter or exit the viewport, making it suitable for interactive applications that require real-time feedback on user scrolling activity.

Features

  • Lightweight (less than 2.8 kb)
  • No dependencies
  • Scroll animations on visibility
  • Based on Intersection Observer API
  • Simple integration with HTML
  • Supports multiple animation effects
  • Customizable duration, delay, and easing options
  • Events for entering and exiting viewport
  • Supports CSS variables for custom properties
  • Ability to reset and update options after initialization

Stats

GitHub Stars3.6K

NPM Downloads5.8K/week

Details

Latest Version0.8.5

Created at9/27/2017

Updated at11/9/2024

LicenseMIT License

Related Items

Get a monthly E-Mail with the newest developments in UI!