Examples
Production-ready snippets for Motion across React, JavaScript, and Vue. Ready to copy paste straight into your site, or adapt with AI.
Basics
Reorder items
Shared layout animation
AnimatePresence modes
AnimatePresence modes
Scale correction
Drag with spring follow
Variants
Physical stagger
Parallax
Path drawing
Path morphing
Reorder animation
Element scroll-linked animation
Scroll-linked animations
Scroll-linked spring animation
Track element within viewport
Scroll-triggered animations
Shared layout animation
Animate state
useTime
Value transform & path drawing
Color interpolation
Color interpolation
Gestures
Bounce easing
Aspect Ratio
Bounce Easing
Drag Lock Direction
HTML content
Drag: Lock direction
Aspect ratio
Bounce easing
CSS Spring
Drag
Drag: Constraints
Enter Animation
Exit animation
Follow pointer with spring
Gestures
Keyframes
Keyframe wildcards
Layout animation
Motion along a path
Rotate
useAnimationFrame
Spring: Follow Cursor
AnimateActivity: Slideshow
usePresenceData
Press
Hover
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
Transition
Lightbox
Page wipe
Layout animation
Shared view animation
View animation
HTML content
Basic animation
Parallax
Rotate
Scroll fade in/out
Scroll pinning
Scroll-triggered animation
Spring
Stagger
Stagger: From center
Stagger: From last
SVG loading spinner
SVG path morphing
Three.js
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.