AnimatePresence modesExamples
Production-ready Motion snippets for React, JavaScript, and Vue. Copy them into your site or adapt them 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 AI Kit.
Learn more about Motion+