Dante

Thanks for the explanation. Is "+=360" equals "current rotation value + 360"? Also, can I add another animation on top of the circular motion animation, without disturbing its motion. Like a shake animation which could trigger when I click a button? Like when I click a button, the bubble shakes a little, but the circular motion continues as if it has no idea about the shake.

Thanks. It does help. I see that you're targeting two different class. Is this the only was to start them at different time. The reason I had multiple transformOrigin was because to give a circular path. The thing I'm aiming for is actually to have div circles move constantly in independent motion. I got with circles, but how about a more randomized path for each. Currently I just moved transform origin at four points, hence the need for four transformOrigins. I was thinking of expanding further than four paths and maybe generate paths and the circles will move to that path. I looked around and found the bezeir thing within gsap. That seems close.

Thanks, it works. How about another circle also doing the same animation but it starts a little bit late or early, just don't want them to animate together. Also, if there's improvement I can make to the code, please let me know!

Currently the loop stops in between. I'd like to make it look continous.