https://github.com/leoreisdias/mini-animations-motion-reactspring-gsap-animejs

🎯 Compare Motion, React Spring, GSAP, Anime.js

Animation clarity, consistent decisions.

This guide defines which animation tool to use per context so teams stay consistent, avoid bloat, and deliver great UX and DX.

SVG Visualizers:

https://svg-path-visualizer.netlify.app/#M5 13l4 4L19 7

✅ Theses

• Keep it simple: Prefer one primary UI animation lib (Motion); add others only when their strengths are required.
• Physics ≠ easing: Use real springs for natural motion; use easings for stylized motion.
• Native first: Prefer WAAPI/CSS when a declarative, zero-JS solution suffices.
• Predictability over tricks: Robustness across reflows, background tabs, and React lifecycles matters more than flair.

🔎 Decision Tree (pick one)

1. UI element (buttons, modals, toasts, layout transitions)? → Motion
2. SVG path drawing or small, imperative keyframes? → Motion (or Anime.js v4)
3. Choreography with many steps, labels, reversals, and scrubbing/scrolling? → GSAP
4. Natural, physics-driven interactions (drag, sliders, layout continuity)? → React Spring
5. Simple hover/loop/skeleton shimmer with zero JS? → CSS keyframes (or WAAPI)

📚 Library Notes