Animation & Transitions

Expert guidance for coordinating animations across LiveView JS commands, Svelte transitions, and CSS — three systems that must play nicely together.

Decision Framework: Which Animation System

1. CSS transitions/keyframes   → Hover states, focus rings, color changes, simple reveals
2. LiveView JS.transition      → Patch-safe class animations tied to server events
3. Svelte transition:          → Enter/exit animations for Svelte-rendered elements
4. Svelte Spring/Tween         → Physics-based or interpolated values (drag, gestures)
5. Web Animations API          → Complex programmatic sequences (rare)