react-motion

Topics in the source

• React Motion (Motion for React)
• 1. Setup
• 2. Core patterns
• 3. Page transitions in Next.js
• 4. Rules
• 5. Verify

New code: npm i motion and import { motion, AnimatePresence } from "motion/react". If the project already uses framer-motion, keep it consistent; to migrate, swap the package and change imports framer-motion → motion/react (API is the same). Next.js App Router: components using motion. must be client components ("use client"). For server components, use import as motion from "motion/react-client". Wrap the app once: Bundle-size sensitive? Use LazyMotion + m components with domAnimation features. Variants + stagger (lists, hero groups) Enter/exit (modals, toasts, dropdowns) — AnimatePresence must stay mounted; the child gets a stable key: Use mode="wait" when swapping one element for another (tab content, steps). Layout animation — layout prop animates size/position changes (accordion, filtering grid, reordering). Shared element: same layoutId in two places (tab underline, card → detail). Wrap related groups in . Micro-interactions Springs for physical feel (buttons, drag, toggles); tweens with ease-out for reveals. Scroll-linked For complex pinned/scrubbed storytelling, use GSAP instead (scroll-animation skill). Drag — drag="x", dragConstraints={ref}, dragElastic, onDragEnd with ve

This is an excerpt. Refer to the complete source and its current requirements.