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

Framer Motion has defaults for how animations will looks. All you have to do is say how you want the motion component to end up in the `animate` prop. The `transition` prop allow you to override there defaults and let you define your own animations

https://app.egghead.io/api/v1/lessons/react-customize-animations-with-the-transition-prop-using-framer-motion/subtitles

Instructor: [0:01] As you can see, Framer Motion actually handles the way the animation looks for you. All you have to do is say how you want it to begin with initial and how you want it to end with anime, and Framer will take care of the rest.

[0:16] If you want to customize how the animation actually looks, then you need to add the transition prop. With the transition prop, you can pass in an object to describe how you want the animation to go from initial and end up in anime. It's the in-between. What happens in between initial and anime is what transition covers.

[0:42] The first thing that we'll change is the duration. This is how long the animation will take. Let's change it to .5. Let's reload. Now, it takes a little less time for the animation to pop into the screen. It's a lot slower. The next thing you want to change is Ease.

[1:03] Ease is the CSS ease in function that says how the flow of the animation. Will it go fast then slow, then slow then fast? Will it speed up in the middle and different things like that. For here, we're going to go linear.

[1:21] Linear means that basically, the animation will be the same the entire time. Let's refresh the page. As you see, the animation smoothly comes in. The type of animation that we will select is a tween. Just like linear, we pass tween as a string. Let's save and reload.

[1:47] As you see, the animation now has our own settings and comes in a lot slower. It's a very linear path. Just you see a stray come down. The tween is a animation type. The different type you can also use is spring. Spring is a lot faster. It has a little bit of bounce.

[2:15] If you want to customize your animation and go beyond the defaults that Framer Motion has, you can use the transition prop.

Customize Animations with the Transition Prop using Framer Motion

Share this video with your friends

Course

Animate React Apps with Framer Motion