motion

Installation

Summary

GPU-accelerated animation library for JavaScript, React, and Vue with gestures, springs, and layout transitions.

Supports motion components (motion.div, motion.svg), variants, transitions with spring physics, and scroll-linked effects
Includes gesture handlers for drag, pan, tap, press, hover, and focus interactions
Provides layout animations with AnimatePresence, LayoutGroup, and drag-to-reorder capabilities
Offers motion values, transforms, and imperative animation controls via useAnimate and animation sequences
Hybrid engine combines JavaScript with native browser APIs for 120fps performance; tree-shakable builds and TypeScript support included

SKILL.md

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