Intermediate

Animation with Framer Motion

Add layout animations, gestures, and page transitions with Motion — accessibly, respecting reduced-motion. Animate a list (enter/exit), a draggable card, and a route transition, finishing with a check that everything respects the user's reduced-motion preference.

~5h

0 / 7 steps

🚀

Intro

Motion turns state changes into animations, not keyframe files

Framer Motion was renamed to Motion, and its React bindings now live at motion/react — the API translates a component's changing props directly into animations, including automatic layout animations when an element's size or position changes for any reason. This project animates a list (enter/exit), a draggable card, and a route transition, finishing with a check that everything respects the user's reduced-motion preference.

🔨

Step 1 — Install and animate your first element

🔨

Step 2 — Animate items entering and leaving a list

🔨

Step 3 — Add drag and gesture interactions

🔨

Step 4 — Respect reduced motion

🎯

Secret Mission

Secret Mission: animate a route transition

🧹

Wrap Up

Before You Go

Pro

Test what you just learned

Self-testing is one of the best ways to retain new skills. Unlock project quizzes to check your understanding.

0 / 7 complete