Jamboo

@mvaneijgen Thank you so much for the help and for the kind welcome! Everything you said was very clear and makes perfect sense! I forked your codepen, took your advice regarding the text assets, and have now included them in the SVG. I ended up nesting the text in with the circle groups as they animate together, but text seems a little hard to work with in regards to text wrap lol. After some research I came across tspan which seems a bit messy, but gets the job done correctly. https://codepen.io/NMJamboo/pen/jOzJZQr I now have the required animation, but just a few final questions. Timing I've used the position parameter to add delays to the animations but from what I read the actual scrub controls the speed of the moving elements? Does that mean that I need to increase the scrollTriggers end value, which will in turn "slow" down the animation? Scaling In regards to scaling, when I shrink down the size of the browser viewPort it seems to work to some extent, but when it gets ~<800px the circles start to get cut off at the start of the animation. I assume this is because the browser is smaller than my SVGs viewBox (500x900), have I set that up correctly? For mobile, I think I'll end up making a more vertical animation anyway with GSAP.MediaMatch, so this is a bit of an extreme case. Bootstrap For the actual website I was thinking about using Bootstrap 5, will scrollTrigger/GSAP be affected in any way? Thanks once again for the help!

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!