Hi all,
Just started my journey into animating SVGs with GSAP and am having a lot of fun. I just have a few questions in relation to what I've already done, and wondered if I'm on the right track/if there is a better way to do it.
I have an animation which is being pinned and scrubbed through with ScrollTrigger. The animation itself has 2 circles which animate towards the center of the screen and overlap like a venn diagram and then reveal a logo in the center. Before that plays, the bottom circle needs to animate upwards onto the screen. I've had a play around trying various ways to do this, but ultimately settled on SVGs being animated FROM the finished positions, as I was having a hard time animating them to always overlap/line up when animated TO the finished position. As you can see from the codepen, I do have it working roughly, but ultimately wanted to know if there's a better way to do it, as I think the current way with have issues with being responsive?
I'm not afraid of tackling the circle sizes/attributes with media queries etc (or GSAP.MediaMatch), but I feel like I'm missing something? I've looked into using transformOrigin to change the origin point of the circles, (top circle's origin could be the bottom, and the bottom circle's origin could be the top) and then I could control the scale, and they would always maintain the same overlap size maybe?
The end goal will also require me to have a text box in the top right and bottom left which will be there and fade out before the circles move. I'm sure I can do the animation with the timeline, but also wondered the best way to include separate text in this instance?
Thanks for any help in advance, and I hope I'm not too far off the mark lol.
Cheers!