A lightweight, performance-focused scroll animation library using Intersection Observer with no dependencies.
Sal is a scroll animation library that triggers animations when elements become visible in the viewport. It solves the performance issues of traditional scroll listeners by using the Intersection Observer API, ensuring smooth animations without jank.
Frontend developers building modern websites who need performant, lightweight scroll animations without heavy frameworks.
Developers choose Sal for its zero-dependency, sub-3kB size and Intersection Observer-based efficiency, offering a simple declarative API while maintaining full customization and event control.
🚀 Performance focused, lightweight scroll animation library 🚀
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Uses the Intersection Observer API to efficiently track element visibility without heavy scroll listeners, ensuring smooth animations with minimal performance impact, as highlighted in the README's focus on modern web projects.
Weighs less than 2.8 kB with zero external dependencies, making it ideal for projects where bundle size is a critical concern, as emphasized in the GitHub description.
Allows animations to be defined via HTML data-sal attributes for simple integration, requiring minimal JavaScript setup—just initialize with sal() as shown in the Usage section.
Supports per-element overrides for duration, delay, and easing using data attributes or CSS custom properties, offering granular control without complex code, detailed in the Animations section.
Relies on Intersection Observer and CustomEvent APIs, which are experimental and may require polyfills for older browsers, as noted in the README's compatibility warnings, adding setup complexity.
Only provides basic entrance effects like fade, slide, zoom, and flip; lacks support for advanced animations such as staggered sequences or custom keyframes, which might not suit complex creative projects.
Requires importing a separate CSS file (sal.css) for styles, adding an extra step in setup compared to pure JavaScript libraries, as mentioned in the Install section.