Sal
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
Links
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
Tailwind Motion
A new simple syntax animation library for enhancing UI with motion effects, focusing on performance and accessibility.
anime.js
This animation library simplifies the process of creating engaging animations for web applications, combining flexibility with ease of use.
GSAP
This animation tool allows you to effortlessly create engaging animations and interactions on the web, enhancing the user experience beyond standard transitions.
Motion One
A modern web animation library built on native browser APIs, ensuring fast performance and tiny file size.
React Spring
This animation solution delivers smooth, high-performance transitions that breathe life into any interface, enhancing user experiences seamlessly.