Multiple SVG elements not hiding while using DrawSVG

[mal458]

Hello! 

I am a student taking a motion course.. and I am trying to figure out why my SVG elements aren't hiding themselves before I call on them. I am using Draw SVG to draw in each element and then each element is supposed to snake its way off the page and then another element would start. I was able to make that happen with help from my professor, but now that I have applied that code to all of my elements each SVG is displaying and only going away after it has completed its motion, so it looks like a hot mess. I have attached my CodePen and hope that what I have typed here makes some sense. I apologize if my code or explanation are not efficient just yet.. I have only just begun using GSAP and am very much still tying to figure things out!! Thank you to anyone who can help, it is much appreciated!!!

See the Pen KKvQLJy by maddylobb (@maddylobb) on CodePen

[PointC]

Hi @maddylobb 

 

Welcome to the forum and thanks for being a Club member. We really appreciate the support.

 

Looks like you're running into some .from() tweens and an immediateRender issue. My advice would be to set each path to drawSVG:0 and then then use .to() tweens. Here's that change.

 

See the Pen e600a675c2e25009c37c3b7880e1d236 by PointC (@PointC) on CodePen

 

An even easier approach with much less code would be to use a stagger. Here's that change.

 

See the Pen fca02b2075d4760899cfec8efb693738 by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[mal458]

@PointC

 

THANK YOU SO MUCH!!! I was able to use your first CodePen to get it all to work! I will defiantly also be studying your second CodePen so that I can apply efficiency throughout my code! Thank you again so much!! I have been fighting my code for too long😂 

[PointC]

Happy to help. Yeah, I wanted to give you a couple ways to write it since you mentioned you were new to GSAP. Best of luck on your GreenSock journey. Let us know if you have any other GSAP related questions or problems. 

 

Happy tweening.