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

Instructor: [0:01] Here, we have a list of four items. Let's see what happens when we refresh the page. Each item animates in all at the same time. While that's OK, I think that we can do something better. Let's make it to where each item animates one right after the other.

[0:21] Framer Motion makes this really easy when you're using variants because, when you use variants, every child component is able to be animated. However, since I did use this exit prop, staggerChildren isn't going to work as expected.

[0:42] Now, what we can do inside of our variant is use custom data that's dynamic. Let's go to the visible variant label. I'm going to paste some new information in here. Basically, I pasted in a function that returns an object. The opacity, when it's visible, is still going to be one. That doesn't change, but the transition now is going to have a delay.

[1:14] Since we want each of these items to animate one at a time, the delay is going to be a dynamic value. That's where custom comes in. Let's go down to our list item, and let's add a custom prop. I pasted in index plus one. We'll go through each item that we have listed, and they'll be multiplied by .2 seconds. Every time we add a new item to the index, it'll add .2 to it.

[1:51] The expression that we pasted in will be the value of the transition delay that we have. Now, when each addItem() is animating onto the DOM, each item in our list will animate .2 seconds behind the other one to become visible. Let's save and refresh the page.

[2:17] As you see, each item waterfalled in right after each other. In order to do that, we had to make an arrow function, pass in custom, have it return an object with a dynamic value for custom, then go down to our list item element. Then, every time that we add something to the index, we want to times it by .2 seconds, and that will become the value of delay.