The first tutorial, began by learning how to animate a loading ring using two circles. One circle had its opacity set to zero, while the other had opacity values of 40 and 100. This setup allowed us to create the “loading” effect. It took a few attempts to fine-tune the animation, but we eventually got it to spin continuously for three full rotations.
https://cdn.lottielab.com/l/DGCW4JvVGN1gBh.html
I thoroughly enjoyed the process of animating each section and refining it through numerous replays until it was working the way I wanted it to. Although, I noticed it slows downs on the last spin, I am happy since this was my first attempt.
There were four main steps in creating this animation. First, we reduced the opacity of the text. Next, we centred the arrow icon and transformed the rectangle into a circle. Then, we animated the arrow to give the illusion of it “flying off.” Finally, we changed the circle's colour from blue to green and added the checkmark icon in the centre.
https://cdn.lottielab.com/l/3ZuNxsfe2WSmZG.html
I found it satisfying to see the final result of this animation. Although it took me some time to figure out each step, I’m proud of what I accomplished, especially since this was my first time animating anything. I did notice that the arrow is slightly visible as it moves away from the circle, which is something I can work on with more practice.