--- name: motion description: > Motion animation library for React - essential patterns for components, transitions, gestures, and performance. Trigger: When animating React components, motion, whileHover, whileTap, layout animations, transitions. license: Apache-2.0 metadata: author: gentleman-programming version: "1.0" --- ## Core Patterns ### Basic Animation ```tsx import { motion } from "motion\/react" ``` ### Gestures ```tsx ``` ### Layout Animations ```tsx \/\/ Auto-animate position\/size changes ``` Use for: expanding panels, grid reordering, responsive shifts, tab switching. ### Variants (Reusable States) ```tsx const variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } } ``` ### Stagger Children ```tsx {items.map(item => ( ))} <\/motion.ul> ``` ### Exit Animations ```tsx import { AnimatePresence } from "motion\/react" {isVisible && ( )} <\/AnimatePresence> ``` ### Scroll Triggers ```tsx ``` ## Performance ### GPU-Accelerated Properties ✅ **Use:** `x`, `y`, `scale`, `rotate`, `opacity` ❌ **Avoid:** `width`, `height`, `top`, `left` ```tsx \/\/ ✅ Good \/\/ ❌ Bad - triggers layout ``` ### Motion Values (No Re-renders) ```tsx import { useMotionValue } from "motion\/react" const x = useMotionValue(0) x.set(100) \/\/ Updates without React re-render return ``` ### Transition Types | Type | Use Case | Example | |------|----------|---------| | `spring` | Natural, bouncy (default) | `{ type: "spring", stiffness: 100 }` | | `tween` | Precise, duration-based | `{ type: "tween", duration: 0.5 }` | ## Common Mistakes ❌ **Missing key in AnimatePresence** ```tsx {show && } \/\/ Missing key! <\/AnimatePresence> ``` ✅ **Always add unique key** ```tsx {show && } <\/AnimatePresence> ``` ❌ **Animating layout properties** ```tsx ``` ✅ **Use transforms** ```tsx ``` ## Resources - **Docs**: [motion.dev\/docs\/react](https:\/\/motion.dev\/docs\/react) - **Context7**: `\/websites\/motion_dev_react`