Animate through Multiple States with Framer Motion Keyframes

Instructor: [0:01] The properties that you pass to the animate prop, like opacity here and y, they don't have to only take one single value. You can actually animate through multiple states using what is called keyframes. Keyframes is an array, and the values that you pass to the keyframes array will animate in a sequence to the value that you want to animate.

[0:24] For example, this is the y-axis. For this, we'll say -200. We'll say , 200, , -200 again, and then we'll end it back at . This will move along the y-axis, which is up and down. Let's save. As you see, it moves up and down the y-axis. Just as with any other animation, you can customize it using the transition prop. For this one, we'll say the duration, let's say two seconds. Save, and then refresh.

[1:07] As you see, it moved up and down the y-axis. By default, Framer Motion will animate the values in this array at the same intervals in-between each animation. You can actually customize that using the times property. The times property is an array.

[1:30] The number of items in the times array much match the items that you put inside the array that you want it to animate. Times, they set values from zero to one in ascending order. That looks like zero will be the start off, and then .2, .3, .7, .9. Then one will end it off.

[1:57] That'll be comma 1. Save. Basically, what this does at zero, it'll start off at -200, at .2 the animation it will be at , then .3 it'll be at 200, and so on and so forth. Let's refresh. As you see, it started up at the top at -200.

[2:23] Then it varied how it animated throughout the animation. If you wanted to animate through different states and pass more than one value to any property inside of the anime prop, you can pass an array, which is called a keyframe.

[2:40] You can customize it with the transition prop and use the times property with an array to customize the time in-between each animation.