framer-motion
Installation
SKILL.md
Framer Motion
Declarative, React-state-driven animation. The default for "this component should animate when X happens".
When to use Framer Motion vs GSAP
| Need | Pick |
|---|---|
| Component mounts/unmounts | Framer (AnimatePresence) |
| State change drives motion | Framer (animate prop) |
| Drag, hover, tap gestures | Framer (whileHover, drag) |
| Shared element across routes | Framer (layoutId) |
| Long imperative timeline | GSAP (gsap skill) |
| Scroll-pinned 3D scene | GSAP ScrollTrigger (threejs-scroll-cinema) |
| Audio-synced choreography | GSAP |
Mixing both in one project is fine. Framer for component-scoped, GSAP for global timelines.