animation-transitions
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)
| System | Trigger | Survives Patch? | Runs Off Main Thread? | Best For |
|---|---|---|---|---|
CSS transition |
Property change | Yes (if class persists) | Yes | Hover, focus, color, size |
CSS @keyframes |
Class add/remove | Yes (if class persists) | Yes | Loading spinners, pulse, shake |
JS.transition |
Server event / user action | Yes | Yes (CSS-based) | Flash highlights, modal open/close |
More from hwatkins/my-skills
elixir-tdd
Test-driven development enforcement for Elixir and Phoenix. Requires failing tests before implementation. Use when implementing features, fixing bugs, or when code quality discipline is needed.
23spam-prevention
When the user needs to prevent spam signups, bot accounts, fake registrations, or abuse of signup/trial flows. Also use when mentioning "spam accounts," "fake signups," "bot registrations," "disposable emails," "signup abuse," or "trial fraud." For broader security concerns, see saas-security.
14elixir-otp
OTP patterns for Elixir — GenServer, Agent, Task, ETS, supervision trees, Registry, and process design. Use when designing concurrent systems, stateful processes, or deciding when (and when NOT) to use processes.
8rust-tdd
Test-driven development enforcement for Rust. Requires failing tests before implementation. Use when implementing features, fixing bugs, or when code quality discipline is needed.
5rust-core
Expert Rust development with ownership, borrowing, lifetimes, traits, error handling, and idiomatic patterns. Use for any Rust code.
4rust-async
Async Rust with Tokio, futures, concurrency patterns, channels, and performance. Use when building async services, networking, or concurrent Rust applications.
4