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
<aside> 👩🏻🦱
I struggled with this from the start as I lost track of what was being said from the first instruction, so I had to get help at the end of this tutorial, which was annoying for me as I just wanted to be able to do something right technically without any help. However, the guidance I got was super helpful and I was able to achieve the animation.
</aside>
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
As usual, I also had issues in making this, but thankfully after we covered one aspect of the animation Ronan came around to everyone to make sure they got it, as he was explaining things to me, I finally started to understand how it worked. It was definitely a struggle, but I was eventually able to do some things on my own which is an achievement for me.
<aside> 👩🏻🦱
Overall, even though I struggled a lot with the software, I’m glad I asked for help as I eventually got the swing of it towards the end of the class. New tools, especially animating which I’ve never done before, are always something I’m going to struggle with as I’m not a very technical person (which sounds bad as i’m doing a digital design course) but I think that UX design is way more than how to use a particular software. I’m still happy with what I achieved in this class, even though it was a bit of a struggle, I was actually starting to get used to it in the end and i’ll definitely keep this in mind if i ever want to animate something for my work.
</aside>