🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 08 : 55 : 11
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
1×
Become a member
to unlock all features
Autoplay

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

    Kyle GillKyle Gill
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.