Create loading animations with Framer Motion's transition prop
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.
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.