Clean Up Your Components with Framer Motion Variants
Variants allow you to create custom animations in an object outside of your component. You can also add any name you want to make your code even more declarative
Instructor: [0:00] In the shopping list.js file, I went ahead and made just a simple animation. Animate the opacity to one. Started out with the opacity of zero, and then have a transition with the duration of one second. Also, in the list form.js file, I imported motion from Framer Motion.
[0:23] Then here for the form, I added the motion tag at a anime opacity of one, with the initial opacity of zero, with a transition duration of one. When we refresh our application, the h1 and the list form both do a slight fade in. Let's head to list.js.
[0:47] I want to animate when our list items actually are added. To do that, we're going to use a feature in Framer Motion called variants. Variants allow you to create complex animations and you can just reference them in the element that you want to animate.
[1:07] First, I'm going to uncomment the import on the list.js file. Then I'm going to go down to the list item, add motion. to the beginning of it, to the beginning and the end. Prefix motion. to both of the LI tags. Let's create a variant called Item Variants.
[1:32] You can call these whatever you want, but I'm going to say item variants so we know what we're referencing. Then you add some properties to say how you want it to animate. We'll call these Variant Labels. Hidden is the variant label.
[1:50] We want the state of hidden to be opacity of zero. Then we'll add another called Visible. For this one, we want the opacity to be one. When it's visible, we want it to be visible, have a solid opacity of one, and the variant label is called visible.
[2:17] Then we'll add a transition to this as well. The transition, you make that a part of whatever variant label that you want to animate to. You don't make it a separate variant label. For this transition, and it'll take an object as well, we'll say duration of one.
[2:42] In order to use variants, go down to the LI element. Then we would add the variants prop. The variants prop, we would pass it the name of the variant that we want to use.
[2:58] This one will be item variants. We have the item variants listed, the element knows what variants we want to use. Let's add a initial prop and this time we'll pass it a string of hidden. Initially, we want it to be hidden.
[3:23] Then when it animates and come to its final state, we want it to be visible. I really like how you can use your own names for the variant labels, and you can make your code even more declarative by giving the names where you can state what you want it to look like.
[3:41] For example, hidden and visible. If we save this, and we add an item to our list, let's say record egghead. You see it's slowly fades in the list item. To recap, we created a object called items variants. Gave it a variant label of hidden with opacity of zero.
[4:12] Another label of visible with opacity of one. We went down to our LI elements that is now in motion element, added the variants prop, passed in item variants, and then use our variant labels inside the initial and anime props.
[4:32] When we refresh the page, we see our h1, our form, and our list item animates onto the page.
That's a really good call out! I'll keep that in mind for the next course. Thank you!
This is a terrific tutorial, thank you. But I was losing my mind when you didn't indent transition within the visible object. At first I thought you just left the } off of the visible property.
Anyway, thank you, it became clear soon enough.