Up & Running with Framer Motion

Instructor: [0:02] Right here, we have this div which is shaped like a box, a happy little box. I already have Framer Motion added as a dependency, so all we have to do is import { motion } from "framer-motion".

[0:29] The next thing we need to do is make this div a motion component. We do that by adding motion. to the beginning of the HTML element name, and then to the closing tag as well. Now, this div becomes a motion component, and it gets accessed to new props from framer-motion.

[0:52] One of those props is animate. The animate prop is how you tell how you want the div or element to animate. It's an object. Let's change it to rotate: 360. Once it reloads, this will make the element rotate 360 degrees.

[1:26] We can also do x and then change it to, let's say, 300. Now, it'll move 300 pixels on the x-axis, and it rotates as well. Keep in mind, for rotate, I didn't have to put 360 degrees. Framer Motion already knew. For the 300, I didn't have to put 300 pixels. Framer Motion already knew.

[1:57] The next prop that you get access to is the initial prop. In the initial prop, you tell Framer Motion where you want the animation to start from. Let's say x:-300. Once that reloads, you see the animation came way from the other side of the screen. It wasn't actually in the frame, because it was -300 on the x-axis. As you see, it stops here at 300.

[2:27] Animate is the state that you want the animation to end and initial the state where you want the animation to start. For our purposes, let's change x to . Then when we reload, the animation starts from right here, pixels, and goes 300 on the x-axis.

[2:50] As you can see, Framer Motion has some defaults, for as how fast it goes, the type of bounce that it has, how often that it runs, and things like that. You can customize that using the transition prop. The transition prop allows you to let Framer know how you want it to go from the initial state to the animate state and come to that end.

[3:15] For transition, let's go for a duration, and let's say 3. Let me spell duration correctly. It's not correct. Let's refresh the page. See, now it rotates. It takes three seconds to get from the initial state to the animate state.

[3:42] Let's make that a little faster. Let's change it to 1. Let's add a repeat. I'm going to put infinity. As I refresh, the animation will repeat infinity, over, and over, and over again. That's kind of jarring for it to keep popping back to the left side of our screen over, and over, and over, so let's add a repeat type.

[4:14] For the repeat type, let's put in a string of "reverse". Now it goes back and forth, back and forth, back and forth, but that is kind of jarring, so let's go repeatDelay: 1 second. Let it wait for one second for repeats. Now, as you see, before it reverses, it actually pauses for about one second, and then goes backwards.

[4:48] That was my little mini course on Framer Motion to give you a quick intro how easy it makes you to be able to make beautiful animations that are smooth and performant. Look out for my course. Thank you for taking this lesson.