Learn Courses Lessons Articles

⌘K

Loading lesson

learn by doing,
two minutes at a time.

LearnCourses Lessons Articles

Watch & listenPodcasts Talks

StoriesCase studies Success stories Campaigns Browse everything →

© 2013–2026 egghead.iothe egg does not crack 🥚

all systems sunny-side up↑ Back to top

Course

Animate React Apps with Framer Motion

12 lessons · 33m

1Install Framer Motion and Create a Motion Component1:34
2Control Animations with Framer Motion's Animate Prop2:35
3Animate through Multiple States with Framer Motion Keyframes2:51
4Use Framer Motion initial Prop to Define the Beginning State of Animations1:39
5Customize Animations with the Transition Prop using Framer Motion2:23
6Clean Up Your Components with Framer Motion Variants4:40
7Animate Elements Removed from the DOM with Framer Motion Animate Presence2:15
Animate Elements When Their Layout Changes with Framer Motion layoutId1:47
9Create Dynamic Animation Values with Framer Motion for Different Elements with Custom2:50
10Create Micro Interactions with Framer Motion Gesture Props2:07
11Animate SVG Paths with Framer Motion2:50
12Drag and Animate List Reorders with Reorder Components5:36

Course lesson

Animate Elements When Their Layout Changes with Framer Motion layoutId

Use the layoutId prop to automatically animate layout changes across, and between, multiple components.

Duration: 2 min
Access: Free
Transcript: Available

Use the layoutId prop to automatically animate layout changes across, and between, multiple components.

Learn Courses Lessons Articles

⌘K

Course

Animate React Apps with Framer Motion

12 lessons · 33m

1Install Framer Motion and Create a Motion Component1:34
2Control Animations with Framer Motion's Animate Prop2:35
3Animate through Multiple States with Framer Motion Keyframes2:51
4Use Framer Motion initial Prop to Define the Beginning State of Animations1:39
5Customize Animations with the Transition Prop using Framer Motion2:23
6Clean Up Your Components with Framer Motion Variants4:40
7Animate Elements Removed from the DOM with Framer Motion Animate Presence2:15
Animate Elements When Their Layout Changes with Framer Motion layoutId1:47
9Create Dynamic Animation Values with Framer Motion for Different Elements with Custom2:50
10Create Micro Interactions with Framer Motion Gesture Props2:07
11Animate SVG Paths with Framer Motion2:50
12Drag and Animate List Reorders with Reorder Components5:36

Course lesson

Animate Elements When Their Layout Changes with Framer Motion layoutId

Use the layoutId prop to automatically animate layout changes across, and between, multiple components.

How was this course?

Animate React Apps with Framer Motion · 12 lessons watched

Your rating

1234567

Not usefulExcellent

Anything else? Optional

Duration: 2 min
Access: Free
Transcript: Available