Creating a circular motion with svgs

[katawura]

l am trying to create an animation where the bubbles move around the "L" in a circular shape like the page preload on the GreenSock site. The pen here . Struggling a bit, any idea how l can achieve this please? 

See the Pen pJQWma by katawura (@katawura) on CodePen

[Jonathan]

Hello katawura, and Welcome to the GreenSock Forum!

 

What I would do is first start off with your drawn SVG circular shapes in a state where they are flat. Meaning not to have them already drawn in a  rotated and perspective state. Since animating your current SVG could look weird since the smaller circular shapes are smaller in the background then those circular shapes in the foreground. Then when the smaller ones come to the foreground, and the bigger ones rotate to the background it can ruin the effect of depth and perspective.

 

If it was me i would basically draw the SVG in a 2D flat state. With all your circular shapes around your "L" equally the same size. Then once you have that you would use GSAP and CSS to have it rotated slightly in the Y-AXIS (y). And then rotate all the circular paths parent. This way when the circular shapes get rotated around the "L" shape they will have the proper perspective.

 

Usually just getting all the pieces your animating in place first and then it makes it easier to animate them with GSAP. So instead of drawing the circular shapes in an already rotated state with  perspective in your paths. You use CSS and GSAP to position and animate your circular shapes around your "L" to achieve the right perspective.

 

Does that make sense?