Control Animations with Framer Motion's Animate Prop

Instructor: [0:01] To get our h1 moving on the screen, let's add the animate prop to our h1 motion component. Animate, it takes in an object, and you use these key-value pairs to describe how you want the animation to animate. For this, we're going to take our h1, and we're going to scale it to twice the size. If you save it, you see that the h1 actually doubled in size when the page loaded.

[0:34] The anime prop tells Framer motion what's the final state that you want the animation to end up in. When the page loads, we want it to end up with a scale of twice its size. Once the page loads, the animation inside of the anime prop will trigger.

[0:56] Let's add something else. Let's say y, which means the y-axis, which is up and down. Let's make it -200. We'll save that. You see that it will move 200 pixels on the y-axis.

[1:14] See here, we didn't actually have to put 200 pixels, px, or anything like that. Framer Motion knows, if you put 200, or any number, really, on the x- or y-axis, that you want to move 200 pixels.

[1:30] If you want to use different CSS units, you can put those inside of parentheses. For here, I'll do -10 REM. We'll save that. Then the same thing, it moved up minus 10 REM. Let's change that back to -200.

[1:54] Another thing I want to point out is that we only told Framer Motion that we want the animation to scale to twice its size and move -200 pixels on the y-axis. We didn't have to say how long the animation was, what type of animation it was, or anything like that. Framer Motion actually takes care of those defaults for you.

[2:16] You are able to customize them using a different type of prop that we will cover later, but initially, Framer Motion takes care of the actual animating itself. All you have to do is tell Framer Motion how you want it to end up.