Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maddylobb

Multiple SVG elements not hiding while using DrawSVG

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 5
Link to comment
Share on other sites

@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😂 

  • Like 3
Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×