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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!