25 — Animations in React

Animation techniques for React — from CSS transitions to production animation libraries.

Animation Approaches

Approach	Best For	Performance
CSS Transitions	Simple hover/toggle effects	Excellent
CSS @keyframes	Looping, complex sequences	Excellent
Framer Motion	Declarative, layout, gestures	Great
React Spring	Physics-based, natural motion	Great
CSS Modules + classes	Toggle-based animations	Excellent
GSAP	Timeline-based, complex sequences	Great
Web Animations API	Low-level, imperative	Excellent

Performance Rules

1. Animate only transform and opacity — they don't trigger layout recalculation
2. Use will-change sparingly for GPU acceleration
3. Prefer CSS transitions over JS for simple animations
4. Use requestAnimationFrame for imperative JS animations

File

• animations.tsx — CSS transitions, keyframes, Framer Motion patterns, mount/unmount animations, layout animations, gesture animations