Animate a React component's position with the animate prop from Framer Motion

Animate a React component using an array of keyframes from Framer Motion

Animate buttons using gesture controls like whileTap and onDrag from Framer Motion

Create loading animations with Framer Motion's transition prop

Trigger state-based React animations using Framer Motion

Link complex animations together with variants from Framer Motion

Animating React Components with 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.

- [Official docs](https://www.framer.com/api/motion/examples/#keyframes)

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.

Course

Animating React Components with Framer Motion

Animate a React component using an array of keyframes from Framer Motion

Share this video with your friends