TLDR: I developed three animations to practice using Greensock and won this codepen challenge!. The requirements were to create a bubbling animation using GSAP.
A bubbling science experiment was the first thing that came to my mind and this was my first attempt at using the gsap library. I drew the image in Figma and created an in-line SVG so I could animate the different layers. The most challenging part of this was creating the sine wave effect on the liquid and I ended up spending more time on this than I did on the bubbles 🤦♀️. I was pretty happy with this as my first attempt but no way was I finishing here.
This seemed like the perfect place to create something that we will never see in real life, so cue attempt number two; a cat having a bubble bath. I took what I had learned with the science experiment and added more. Getting the timing on the bubble bursts was quite challenging and so my code for this attempt was not DRY at all! I was happy that I had learned new techniques like creating a motion path but again I wanted to push this further and refactor.
Third time lucky and we have a winner! I added more bubbles and created functions to randomly generate motion paths and timing for each bubble. I also animated the bath bubbles and the cat's eyes to make it more playful.