Animate a React component using an array of keyframes from Framer Motion
Learn how to apply keyframe animations to React components with Framer Motion by passing an array of values to the animate prop.
The time for each keyframe can be configured with the times prop, and even more options can be set if you don't like the default transitions applied by the library.
Instructor: [00:00] In a motion component like this icon wrapped by a motion div, you can pass an array instead of a single value to animate between each of the values like a traditional CSS key from animation.
[00:14] By default, each key frame will be spaced evenly throughout the animation, but you can pass a transition prop to the motion component and we'll just configure how long each key frame will run by passing in an array of times.
[00:30] By adding a duration, you can specify how long it will take to run the whole animation and easing method can smooth out the animation.
[00:41] In this example, the element will start at position 0at 0seconds. We'll move 25 pixels starting at 02 seconds. We'll move another 25 pixels to position 50 at 04 seconds. We'll stay still for 02 seconds, and then move to final 150 pixels from the 1 second to 2 second marks when the animation ends.