Animations with Motion

Create fluid, performant animations with Motion (Framer Motion). Learn patterns for transitions, scroll effects, gestures, and layout animations.

Basic Animations & Variants
Learn the fundamentals of Motion animations: initial/animate states, transitions, spring physics, and variants for reusable animations.
motion.divvariantsspring
  • Spring
  • Stagger
  • Variants
  • Ease
Scroll-Triggered Animations
Animate elements when they enter the viewport using whileInView, create parallax effects with useTransform, and build scroll progress indicators.
whileInViewuseScrollparallax
Element 1
Element 2
Element 3
Element 4

Elements animate with stagger when they enter the viewport. In real usage, scroll down to trigger.

Gesture Animations
Create interactive elements with hover, tap, drag, and focus gestures. Motion makes it easy to add delightful micro-interactions.
whileHoverwhileTapdrag

Hover & Tap

Drag within bounds

Hover Card

Hover me

I lift up on hover

Layout Animations
Automatically animate layout changes with the layout prop. Create smooth transitions for expanding cards, tabs with shared elements, and reorderable lists.
layoutlayoutIdAnimatePresence

Shared Layout (Tabs)

Layout Animation (List)

Item 1
Item 2
Item 3
Item 4

The layout prop automatically animates position and size changes.