Install Framer Motion and Create a Motion Component

Control Animations with Framer Motion's Animate Prop

Animate through Multiple States with Framer Motion Keyframes

Use Framer Motion initial Prop to Define the Beginning State of Animations

Customize Animations with the Transition Prop using Framer Motion

Clean Up Your Components with Framer Motion Variants

Animate Elements Removed from the DOM with Framer Motion Animate Presence 

Animate Elements When Their Layout Changes with Framer Motion layoutId

Create Dynamic Animation Values with Framer Motion for Different Elements with Custom

Create Micro Interactions with Framer Motion Gesture Props

Animate SVG Paths with Framer Motion

Drag and Animate List Reorders with Reorder Components

Animate React Apps with Framer Motion

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

https://app.egghead.io/api/v1/lessons/react-animate-elements-when-their-layout-changes-with-framer-motion-layoutid/subtitles

Will Johnson: [0:02] Take notice what happens when we start adding items to our list. As you can see, it does fade in, but the item that was at the top of the list kind of jerks down. It's not smooth. It isn't fluid, and also the same thing when we remove it. It just jerks. That's not the experience that we're going for in our animation.

[0:24] Luckily, Framer Motion makes this incredibly easy, especially now with Framer Motion 5. All we have to do is go to our list item and then add a layoutId prop. We'll set it to item.id. Basically, we want Framer Motion to keep track of the layout of the id of each item.

[0:52] Now, whenever the items that we're tracking layout changes, that means it needs to move somewhere or something like that, Framer Motion will automatically animate it in place because now all these items are considered to share the same layout.

[1:12] Let me show you what that looks like. We'll add the first one, of course. That one animates in. We'll add the second one. Notice how it slides down and makes room. It just looks a lot better. The same thing happens on the exit animation. It fades out and then slides up. It's a lot smoother and a lot less jerky.

[1:34] To recap, all we did was add the layoutId prop and we wanted Framer Motion to track the layout of the item.id, which is the items that we're adding to the list.

Animate Elements When Their Layout Changes with Framer Motion layoutId

Share this video with your friends

Course

Animate React Apps with Framer Motion