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