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

The `custom` prop let's you create dynamic variant values to animate each component differently.

.

https://app.egghead.io/api/v1/lessons/react-create-dynamic-animation-values-with-framer-motion-for-different-elements-with-custom/subtitles

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.

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

Share this video with your friends

Course

Animate React Apps with Framer Motion