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

Add the `animate` prop to any motion component to tell Framer Motion what state you want your component to end up in when the animation is complete

https://app.egghead.io/api/v1/lessons/react-control-animations-with-framer-motion-s-animate-prop/subtitles

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.

Control Animations with Framer Motion's Animate Prop

Share this video with your friends

Course

Animate React Apps with Framer Motion