SVG not completely disappearing

[ethanp]

Hello, I'm new to GSAP, so apologies if this is not the right place to ask! I'm not exactly sure where my issue lies (if this is GSAP or the ScrollMagic library).

I have a path that I am trying to animate on scroll (recreating this effect). I am able to recreate this up to the point of scrolling back up. When I scroll back up, the path mostly disappears, but a single dot is left behind. This behavior seems inconsistent - I have two examples of paths in the codepen where a dot is left behind only in the second path. To recreate my bug, scroll down, wait a second, then scroll back up.

I generated these paths by drawing a path in Inkscape, then copying the d="..." value from the generated svg. More often than not, I get a path that leaves a dot behind. But the only difference between the two paths in the codepen is that I translated and scaled one of them. 

Thank you!

See the Pen ZEVKyKd by ethannp (@ethannp) on CodePen

[GreenSock]

Welcome to the forums, @ethanp You've come to the right place. 

 

First of all, ScrollMagic is not a GreenSock product and it's very very old and has no ongoing support. I'd strongly recommend switching to our ScrollTrigger library which is far more capable and it integrates perfectly with GSAP. 

 

Secondly, it looks like you're trying to control the path drawing manually by animating the strokeDashoffset which you can do but there are various "gotchas", like the one you ran into there where the browser leaves a little bit behind when the length isn't calculated exactly right. In your case, you've got a stroke width of 5, thus even when the offset should be sitting at exactly the start, you'll have 2.5px of stroke still showing. So you probably need to offset the length value by 2.5 or 3. 

 

If you use DrawSVGPlugin, it solves issues like that for you automatically (and several other cross-browser inconsistencies/bugs). It's a members-only plugin, though. https://greensock.com/club

 

Look how much simpler it is with ScrollTrigger and DrawSVGPlugin: 

See the Pen yLGbXjm?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I'm not sure exactly when you want things to trigger or if you need things staggered or whatever, but that should give you a good starting point. Enjoy the tools!