motion

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