saos

• A lightweight Svelte component for animating elements on scroll
• Uses Intersection Observer API for better performance (not supported in Internet Explorer)
• Key features:
  • Animate elements once or multiple times on scroll
  • Define custom top/bottom trigger points
  • Optional animation when elements exit viewport
  • Reactive updates through dispatched events
  • Supports custom CSS for observer and animation containers

Target Audience: Svelte developers looking to add scroll-based animations to their projects

Framework Support: Primarily designed for Svelte (including Sapper with some caveats)

Key Usage:

1. Import component and define global keyframe animations
2. Wrap content in <Saos> component with animation parameters
3. Optional parameters include:
   • animation_out for exit animations
   • once for single-play animations
   • top/bottom for custom trigger points
   • Event listeners for reactive updates

Resources:

• Demo fa-solid fa-up-right-from-square
• Example Implementations fa-solid fa-up-right-from-square
• Recommended animation resource: Animista fa-solid fa-up-right-from-square