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 `initial` prop to a motion component to tell Framer what state you want the element to be in when the page first loads. It will animate from that state to the state you declared in the `animate` prop.

https://app.egghead.io/api/v1/lessons/react-use-framer-motion-initial-prop-to-define-the-beginning-state-of-animations/subtitles

Will Johnson: [0:00] If the animate prop is how we want the animation to end up, then the initial prop is how we want the animation to begin. Let's set our animation prop to y: . We want to end up at  on the y-axis within the container.

[0:22] Let's add the initial prop. The initial prop takes in an object, just like the animate prop does. Let's say we want it to be y, and let's say -200 on the y-axis. Let's add this space and then save. Then we reload the page. As you see, it starts -200 degrees and comes all the way down to y of .

[0:51] Let's add something else in here. Let's say opacity because it's making a nice little moving fade. Let's say opacity: . You don't want it to be visible, initially, when the page loads. Let's animate the opacity to 1. We want it to be solid by the time the animation is finished. Then we save. As you see, it dropped down and faded in.

[1:29] A good way to remember this is, initial is how it started, and animate is how it ended.

Use Framer Motion initial Prop to Define the Beginning State of Animations

Share this video with your friends

Course

Animate React Apps with Framer Motion