Step 1Started scanning 8 sources.
Content
Motion (Framer Motion)
Production-ready animation library for React. Use for component-level motion, layout transitions, gesture responses, and exit animations.
Core concepts
- motion components —
<motion.div>wraps any HTML or SVG element with animation superpowers - variants — named animation states that propagate through component trees
- layout animations — automatic interpolation when elements change position or size
- AnimatePresence — animate components as they mount and unmount
- gestures —
whileHover,whileTap,whileDrag,whileFocus
When to use
| Scenario | Motion? |
|---|---|
| Component enter/exit | Yes — AnimatePresence |
| Layout shifts (reorder, resize) | Yes — layout prop |
| Hover/press micro-interactions | Yes — gesture props |
| Scroll-driven pinning or scrubbing | No — use GSAP ScrollTrigger |
| Page route transitions | Yes — with view transitions or AnimatePresence |
| Complex multi-surface orchestration | No — use GSAP timelines |