Motion is an open-source animation library for JavaScript, React, and Vue. It provides a simple API with first-class support for multiple platforms, a hybrid animation engine combining JavaScript with native browser APIs for 120fps GPU-accelerated animations, and production-ready features including TypeScript support, extensive test suite, tree-shakable builds, and a tiny footprint. Batteries included: gestures, springs, layout transitions, scroll-linked effects, and timelines.
The skill is based on Motion v12.29.2, generated at 2026-02-01.
Core References
| Topic |
Description |
Reference |
| Motion Components |
Basic motion components (motion.div, motion.svg, etc.) |
core-components |
| Basic Animation |
animate prop, initial, while states |
core-animation |
| JavaScript animate() |
Vanilla animate(), sequences, createScopedAnimate |
core-javascript-animate |
| Vanilla scroll() |
Imperative scroll() and scrollInfo() for non-React |
core-vanilla-scroll |
| motionValue |
Create MotionValues without React |
core-vanilla-motion-value |
| stagger |
Orchestrate child delays in variants |
core-stagger |
| frame / cancelFrame |
Motion's animation loop |
core-frameloop |
| motion/mini |
Minimal bundle entry |
core-motion-mini |
| Variants |
Declarative animation variants and orchestration |
core-variants |
| Transitions |
Animation timing, easing, spring physics |
core-transitions |
Motion Values
| Topic |
Description |
Reference |
| useMotionValue |
Create and use motion values for reactive animations |
values-motion-value |
| useSpring |
Spring-based motion values with physics |
values-spring |
| useTransform |
Transform motion values with functions |
values-transform |
| useMotionTemplate |
Combine motion values into a string (e.g. filter, boxShadow) |
values-motion-template |
| useFollowValue |
Motion value that follows a source with any transition |
values-follow |
| useScroll |
Scroll-linked motion values and animations |
values-scroll |
| useVelocity |
Access velocity of motion values |
values-velocity |
| useTime |
Time-based motion values |
values-time |
| useWillChange |
GPU layer hint for animating elements |
values-will-change |
Gestures
| Topic |
Description |
Reference |
| Drag |
Drag gestures with constraints and controls |
gestures-drag |
| Pan |
Pan gestures for touch and pointer events |
gestures-pan |
| Tap & Press |
Tap and press gesture handlers |
gestures-tap-press |
| Hover & Focus |
Hover and focus state animations |
gestures-hover-focus |
Layout Animations
| Topic |
Description |
Reference |
| AnimatePresence |
Animate components entering and exiting |
layout-animate-presence |
| usePresence / useIsPresent |
Access presence state in AnimatePresence children |
layout-use-presence |
| usePresenceData |
Read AnimatePresence custom prop in descendants |
layout-presence-data |
| LayoutGroup |
Coordinate layout animations across components |
layout-group |
| Layout Animations |
Automatic layout animations with layoutId |
layout-animations |
| Reorder |
Drag-to-reorder with layout animations |
layout-reorder |
| useInstantLayoutTransition |
Block layout update for one frame |
layout-instant-transition |
| useResetProjection |
Reset layout projection tree after structural change |
layout-reset-projection |
Features
| Topic |
Description |
Reference |
| In View |
useInView, inView(), usePageInView for viewport/visibility |
features-in-view |
| Resize |
resize() observer for window or element size |
features-resize |
| Optimized Appear |
SSR-friendly appear animations with handoff |
features-optimized-appear |
| SVG Path |
pathLength, pathOffset, pathSpacing for path animations |
features-svg-path |
| motion/client |
Next.js "use client" and tree-shakable components |
features-react-client |
Utils
| Topic |
Description |
Reference |
| useReducedMotion |
Hooks for reduced motion preference |
utils-reduced-motion |
| useAnimationFrame |
Frame-synced callback with Motion's loop |
utils-animation-frame |
| useCycle |
Cycle through a list of states |
utils-cycle |
| useMotionValueEvent |
Subscribe to motion value events |
utils-motion-value-event |
| delay |
Frame-synced delayed execution |
utils-delay |
| interpolate |
Map input range to output |
utils-interpolate |
| useDomEvent |
Attach DOM event listeners |
utils-dom-event |
| useInstantTransition |
Block layout animations during update |
utils-instant-transition |
| calcLength / createBox / distance |
Projection geometry and distance |
utils-path-geometry |
Advanced
| Topic |
Description |
Reference |
| Animation Controls |
Programmatic animation control with useAnimation |
advanced-animation-controls |
| useAnimate |
Imperative animation API |
advanced-use-animate |
| LazyMotion |
Code-split animations for better performance |
advanced-lazy-motion |
| MotionConfig |
Global configuration and reduced motion |
advanced-motion-config |
| Scroll Animations |
Scroll-linked animations and parallax effects |
advanced-scroll-animations |
| transformTemplate |
Custom transform output |
advanced-transform-template |
| addScaleCorrector |
Layout projection scale correctors |
advanced-scale-corrector |
Best Practices
| Topic |
Description |
Reference |
| Bundle Size |
Entry points and optimization strategies |
best-practices-bundle |
1---2name: motion3description: Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.4---56Motion is an open-source animation library for JavaScript, React, and Vue. It provides a simple API with first-class support for multiple platforms, a hybrid animation engine combining JavaScript with native browser APIs for 120fps GPU-accelerated animations, and production-ready features including TypeScript support, extensive test suite, tree-shakable builds, and a tiny footprint. Batteries included: gestures, springs, layout transitions, scroll-linked effects, and timelines.78> The skill is based on Motion v12.29.2, generated at 2026-02-01.910## Core References1112| Topic | Description | Reference |13|-------|-------------|-----------|14| Motion Components | Basic motion components (motion.div, motion.svg, etc.) | [core-components](references/core-components.md) |15| Basic Animation | animate prop, initial, while states | [core-animation](references/core-animation.md) |16| JavaScript animate() | Vanilla animate(), sequences, createScopedAnimate | [core-javascript-animate](references/core-javascript-animate.md) |17| Vanilla scroll() | Imperative scroll() and scrollInfo() for non-React | [core-vanilla-scroll](references/core-vanilla-scroll.md) |18| motionValue | Create MotionValues without React | [core-vanilla-motion-value](references/core-vanilla-motion-value.md) |19| stagger | Orchestrate child delays in variants | [core-stagger](references/core-stagger.md) |20| frame / cancelFrame | Motion's animation loop | [core-frameloop](references/core-frameloop.md) |21| motion/mini | Minimal bundle entry | [core-motion-mini](references/core-motion-mini.md) |22| Variants | Declarative animation variants and orchestration | [core-variants](references/core-variants.md) |23| Transitions | Animation timing, easing, spring physics | [core-transitions](references/core-transitions.md) |2425## Motion Values2627| Topic | Description | Reference |28|-------|-------------|-----------|29| useMotionValue | Create and use motion values for reactive animations | [values-motion-value](references/values-motion-value.md) |30| useSpring | Spring-based motion values with physics | [values-spring](references/values-spring.md) |31| useTransform | Transform motion values with functions | [values-transform](references/values-transform.md) |32| useMotionTemplate | Combine motion values into a string (e.g. filter, boxShadow) | [values-motion-template](references/values-motion-template.md) |33| useFollowValue | Motion value that follows a source with any transition | [values-follow](references/values-follow.md) |34| useScroll | Scroll-linked motion values and animations | [values-scroll](references/values-scroll.md) |35| useVelocity | Access velocity of motion values | [values-velocity](references/values-velocity.md) |36| useTime | Time-based motion values | [values-time](references/values-time.md) |37| useWillChange | GPU layer hint for animating elements | [values-will-change](references/values-will-change.md) |3839## Gestures4041| Topic | Description | Reference |42|-------|-------------|-----------|43| Drag | Drag gestures with constraints and controls | [gestures-drag](references/gestures-drag.md) |44| Pan | Pan gestures for touch and pointer events | [gestures-pan](references/gestures-pan.md) |45| Tap & Press | Tap and press gesture handlers | [gestures-tap-press](references/gestures-tap-press.md) |46| Hover & Focus | Hover and focus state animations | [gestures-hover-focus](references/gestures-hover-focus.md) |4748## Layout Animations4950| Topic | Description | Reference |51|-------|-------------|-----------|52| AnimatePresence | Animate components entering and exiting | [layout-animate-presence](references/layout-animate-presence.md) |53| usePresence / useIsPresent | Access presence state in AnimatePresence children | [layout-use-presence](references/layout-use-presence.md) |54| usePresenceData | Read AnimatePresence custom prop in descendants | [layout-presence-data](references/layout-presence-data.md) |55| LayoutGroup | Coordinate layout animations across components | [layout-group](references/layout-group.md) |56| Layout Animations | Automatic layout animations with layoutId | [layout-animations](references/layout-animations.md) |57| Reorder | Drag-to-reorder with layout animations | [layout-reorder](references/layout-reorder.md) |58| useInstantLayoutTransition | Block layout update for one frame | [layout-instant-transition](references/layout-instant-transition.md) |59| useResetProjection | Reset layout projection tree after structural change | [layout-reset-projection](references/layout-reset-projection.md) |6061## Features6263| Topic | Description | Reference |64|-------|-------------|-----------|65| In View | useInView, inView(), usePageInView for viewport/visibility | [features-in-view](references/features-in-view.md) |66| Resize | resize() observer for window or element size | [features-resize](references/features-resize.md) |67| Optimized Appear | SSR-friendly appear animations with handoff | [features-optimized-appear](references/features-optimized-appear.md) |68| SVG Path | pathLength, pathOffset, pathSpacing for path animations | [features-svg-path](references/features-svg-path.md) |69| motion/client | Next.js "use client" and tree-shakable components | [features-react-client](references/features-react-client.md) |7071## Utils7273| Topic | Description | Reference |74|-------|-------------|-----------|75| useReducedMotion | Hooks for reduced motion preference | [utils-reduced-motion](references/utils-reduced-motion.md) |76| useAnimationFrame | Frame-synced callback with Motion's loop | [utils-animation-frame](references/utils-animation-frame.md) |77| useCycle | Cycle through a list of states | [utils-cycle](references/utils-cycle.md) |78| useMotionValueEvent | Subscribe to motion value events | [utils-motion-value-event](references/utils-motion-value-event.md) |79| delay | Frame-synced delayed execution | [utils-delay](references/utils-delay.md) |80| interpolate | Map input range to output | [utils-interpolate](references/utils-interpolate.md) |81| useDomEvent | Attach DOM event listeners | [utils-dom-event](references/utils-dom-event.md) |82| useInstantTransition | Block layout animations during update | [utils-instant-transition](references/utils-instant-transition.md) |83| calcLength / createBox / distance | Projection geometry and distance | [utils-path-geometry](references/utils-path-geometry.md) |8485## Advanced8687| Topic | Description | Reference |88|-------|-------------|-----------|89| Animation Controls | Programmatic animation control with useAnimation | [advanced-animation-controls](references/advanced-animation-controls.md) |90| useAnimate | Imperative animation API | [advanced-use-animate](references/advanced-use-animate.md) |91| LazyMotion | Code-split animations for better performance | [advanced-lazy-motion](references/advanced-lazy-motion.md) |92| MotionConfig | Global configuration and reduced motion | [advanced-motion-config](references/advanced-motion-config.md) |93| Scroll Animations | Scroll-linked animations and parallax effects | [advanced-scroll-animations](references/advanced-scroll-animations.md) |94| transformTemplate | Custom transform output | [advanced-transform-template](references/advanced-transform-template.md) |95| addScaleCorrector | Layout projection scale correctors | [advanced-scale-corrector](references/advanced-scale-corrector.md) |9697## Best Practices9899| Topic | Description | Reference |100|-------|-------------|-----------|101| Bundle Size | Entry points and optimization strategies | [best-practices-bundle](references/best-practices-bundle.md) |
om-scogo