🎁

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 : 57 : 45
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

    Create loading animations with Framer Motion's transition prop

    Kyle GillKyle Gill
    reactReact

    Learn how to animate components with the transition prop to reverse animations, loop them, adjusting their easing, and more, which are all great for creating loading animations.

    The transition prop is a powerful part of Framer Motion that defines "how values animate from one state to another".

    Check out the official docs for more information on how to customize attributes of the transition prop.

    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: 0:00 In a motion component like with this loading icon wrapped by a motion div, Framer Motion provides the transition prop to define how values animate from one state to another.

    0:11 By adding an initial prop and an animate prop, you can define the initial state of the component, as well as what it will animate to, but it will only animate once.

    0:26 By adding a transition prop, you can customize the animation to yoyo or reverse the animation back and forth. Yoyo will reverse the animation. Another option is to loop the animation. You can also pass in the number of times you'd like the animation to loop your yoyo for, instead of infinity, which will repeat indefinitely.

    1:08 Other transition attributes like duration and ease can adjust how long the transition runs, and how it eases between animation states. Adjusting the time of duration will lengthen the animation and changing ease will use a different easing function.