Motion
Package: motion (React, Vue, vanilla JS) | Chapters: 142 | Source pages covered: 282 | Generated: 2026-08-24
How to Use This Skill
- Without arguments — load Core Patterns below for the composition primitives (variants, AnimatePresence, layout, motion values, gestures)
- With a topic — ask about
drag, scroll, spring, layout animation, or another indexed topic; I find and read the relevant chapter
- With a chapter — ask for
ch047; I load that specific chapter
- With an error message — check the Troubleshooting chapter (ch132) first, it indexes Motion's official error/warning messages by symptom
- Browse — ask "what chapters do you have?" to see the full index below
Core Patterns & Conventions
Motion's API surface is organized around a small set of composable primitives, not hundreds of independent features:
- The
motion component (<motion.div> etc.) is the entry point for declarative animation: initial/animate/exit define states, transition defines how you get there.
- Variants name those states so parent and children can share them without repeating target values, and so
AnimatePresence knows what to animate on exit.
- Gesture props (
whileHover, whileTap, whileDrag, whileFocus, whileInView) are just more named states tied to an interaction instead of to mount/unmount.
layout replaces manual FLIP math: give an element the layout prop (or layoutId for shared-element transitions) and Motion animates position/size changes automatically.- Motion values (
useMotionValue, useSpring, useTransform, useScroll, useVelocity) are the escape hatch for anything that updates every frame (drag, scroll, cursor) without triggering React re-renders — bind them straight to a style prop.
- Transitions are either spring or tween. Spring (physics-based: stiffness/damping/mass) is the default feel for anything gesture-adjacent; tween (duration + easing) is for fixed-length, predictable timing.
- Orchestration (
staggerChildren, delayChildren) lives on the parent variant's transition, not on each child.
- Performance discipline: animate
transform/opacity wherever possible; anything else risks layout/paint cost, especially in scroll- or drag-driven loops.
- React and Vue mirror each other closely (same hook names, same prop names); vanilla JS drops the hooks and uses
animate(), scroll(), and the motion-value functions directly.
- AI Kit is a separate, smaller companion product (code generation, transition editor, code audit) layered on top of the core library, not a prerequisite for using Motion.
Chapter Index
Vanilla JS Core
React
| # | Title |
|---|
| ch001 | React motion component |
| ch002 | Install Motion+ for React |
| ch005 | Tailwind CSS animations |
| ch009 | Create accessible animations in React |
| ch010 | AnimateActivity - Create React exit animations |
| ch011 | Animate numbers |
| ch012 | AnimatePresence |
| ch013 | AnimateView - Animated page transitions in React |
| ch014 | React carousel component |
| ch016 | React drag animation guide |
| ch017 | React gesture animations |
| ch018 | Motion for React: Get started - React Animation Library |
| ch019 | React hover animation guide |
| ch020 | How to install Motion for React |
| ch021 | Layout Animation |
| ch022 | LayoutGroup |
| ch023 | LazyMotion |
| ch024 | Motion for React: Get started - React Animation Library |
| ch025 | Motion Values |
| ch026 | MotionConfig |
| ch027 | React Animation |
| ch028 | React scroll animation |
| ch029 | Reduce bundle size of Framer Motion |
| ch030 | Reorder |
| ch031 | ScrambleText: Scrambled text animations for React |
| ch032 | SVG Animation in React |
| ch034 | Ticker |
| ch035 | React transitions |
| ch036 | Typewriter effect & typing animations |
| ch037 | Motion & Framer Motion upgrade guide |
React Hooks
Vue
| # | Title |
|---|
| ch094 | Vue <motion /> component |
| ch095 | AnimateNumber |
| ch096 | AnimatePresence |
| ch097 | Carousel, a performant, infinite scrolling carousel |
| ch098 | Cursor |
| ch099 | Vue gesture animations |
| ch100 | Get started with Vue animations |
| ch101 | Integration Motion for Vue with Reka |
| ch102 | Vue layout animations |
| ch103 | LayoutGroup |
| ch104 | LazyMotion |
| ch105 | v-motion Directive – Motion for Vue |
| ch106 | Motion values |
| ch107 | MotionConfig |
| ch108 | Reorder |
| ch109 | Vue scroll animation |
| ch110 | Ticker |
| ch111 | Vue transitions |
| ch112 | Vue text animations with <Typewriter> |
| ch125 | Vue animations with Motion for Vue |
Vue Hooks
AI Kit
| # | Title |
|---|
| ch126 | Motion AI Kit AI Context: docs and example context for your agent |
| ch128 | Generate CSS springs with your LLM |
| ch129 | Transition editor |
| ch130 | Motion AI Kit. MotionScore for Agents, current docs and CSS springs |
| ch131 | Install the Motion AI Kit |
Framework & Tool Integrations
| # | Title |
|---|
| ch003 | Framer x Motion |
| ch004 | Figma Motion to code |
| ch006 | Animate Base UI components |
| ch007 | Radix: How to Add Animations to Radix |
| ch059 | Squarespace animation guide |
| ch060 | Wordpress animation guide |
| ch069 | GSAP vs Motion: A detailed comparison |
| ch072 | Webflow animation guide |
| ch075 | Migrate from GSAP to Motion |
Troubleshooting
| # | Title |
|---|
| ch132 | Troubleshooting Common Errors |
Examples & Recipes
| # | Title |
|---|
| ch133 | Loading Indicators (Recipes) |
| ch134 | Scroll-driven Effects (Recipes) |
| ch135 | Text Effects (Recipes) |
| ch136 | Cursor & Pointer Effects (Recipes) |
| ch137 | Gestures & Interaction (Recipes) |
| ch138 | Layout & Card UI Patterns (Recipes) |
| ch139 | Transitions, Keyframes & Variants (Recipes) |
| ch140 | Sliders & Carousels (Recipes) |
| ch141 | Misc & Advanced (Recipes) |
Performance & Platform Notes
| # | Title |
|---|
| ch142 | Performance & Platform Notes |
Topic Index
- Accessibility / reduced motion → ch (see React/Vue "accessibility" and "reduced-motion" chapters), cheatsheet.md
- AnimatePresence / exit animations → React AnimatePresence chapter, ch139 (Transitions & Variants recipes)
- Drag gestures → React/Vue drag chapters, ch137 (Gestures recipes)
- Errors & warnings → ch132 (Troubleshooting)
- Layout animation → React/Vue layout-animations chapters, patterns.md
- Motion values (useMotionValue/useTransform/useSpring/useScroll) → respective hook chapters, glossary.md
- Performance → ch142 (Performance & Platform Notes), cheatsheet.md
- Scroll-linked animation → useScroll chapters, ch134 (Scroll-driven Effects recipes)
- SVG / path animation → svg-animation, svg-effect, path-drawing/path-morphing chapters
- Variants & orchestration → React/Vue variants concepts, patterns.md
- Vanilla JS (framework-free) usage → Vanilla JS Core chapter group
Supporting Files
Scope & Limits
This skill covers the official Motion documentation as fetched 2026-08-23 (282 source pages). Two curation decisions worth knowing:
- Examples (114 source pages, often duplicated across JS/React/Vue for the same effect) were consolidated into 9 recipe chapters grouped by technique, covering all 86 distinct effects, rather than reproduced 1:1. Each entry names which frameworks have that recipe; read the framework-specific example on motion.dev for the full runnable code.
- Magazine/blog posts (17 source pages) were reduced to a single chapter of durable technical notes (performance, browser quirks, API comparisons). Pure product announcements and interviews were excluded as non-reference content.
For hands-on implementation in a specific codebase, combine with project-specific tools.
