Examples
Production-ready snippets for Motion across React, JavaScript, and Vue. Ready to copy paste straight into your site, or adapt with AI.
Basics
AnimatePresence modes
Color interpolation
Drag: Lock direction
Aspect ratio
Bounce easing
AnimateActivity: Slideshow
usePresenceData
Follow pointer with spring
HTML content
Keyframe wildcards
Drag with spring follow
Reorder animation
Element scroll-linked animation
Track element within viewport
Animate state
Spinning 3D cube
useTime
CSS spring
Exit animation
Drag
Drag: Constraints
Enter animation
Gestures
Keyframes
Layout animation
Motion along a path
Path drawing
Path morphing
Scroll-linked animations
Scroll-linked spring animation
Scroll-triggered animations
Shared layout animation
Transition options
Value transform & path drawing
Variants
Rotate
Pull example source straight into Cursor, Claude Code, and any MCP-aware agent.
Premium examples are searchable for Motion+ members through the Motion MCP server.
Learn more about Motion+Motion+
Unlock all 370+ examples
- Source code for every Plus example.
- Provide examples direct to your agent via Motion's MCP.
- Lifetime access to new examples and APIs.