dots remain when line animation restarted

[tama]

Hi, everyone.

I have a question about line animation.

in advance, I'm beginner of the GSAP and even not familiar to write English, so I'm sorry if my question doesn't make sense.

 

the problem now I have happens when I restart the SVG line animation from the "redrawing" button.

as you see, somehow a part like dots of each lines are remaining from the beginning.

although when refreshing a browser or using Run button, it perfectly works.

 

would anyone tell me how to avoid it and why the dots appear in this case?

Thanks in advance!

See the Pen NWNmNJb by tama441 (@tama441) on CodePen

[GreenSock]

This is actually a great illustration of why DrawSVGPlugin is valuable. A lot of people think they can get the same effect by manually animating the strokeDashoffset which is technically true in many cases, but there are quite a few tricky things that the plugin solves for you and you just stumbled on one of them. Specifically, I noticed: 

• You set the attribute with your function, but then you animated the CSS property. Be very careful because that ends up with there being two completely different values and some browsers prioritize CSS, and others may prioritize the attribute. In other words, how would you expect the browser to render this: 

  <path stroke-dashoffset="320" style="stroke-dashoffset: 50px" />

   

• More importantly, you used .getTotalLength() to get the path length which isn't always terribly accurate depending on the browser. In this case the real problem is that after you set that via the attribute, and then you tried animating it with GSAP (good), when GSAP tried to get the current value, the browser reported it slightly differently than what you set in the attribute via getComputedStyle(). Thus when you "rewind", the offset is slightly off, causing things to peek out. 

Here's a reworked version that uses DrawSVGPlugin. Notice there's less than half the code necessary: 

See the Pen 133a8081ce0fcb6026f7e0b9386159ae?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And it "just works". 

 

Here are a few things DrawSVGPlugin solves for you:

• If a non-scaling-stroke is applied, it will mess up your path's length
• Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick.
• Firefox has a bug that throws an error if the element isn't visible.
• Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin.
• Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times.
• Some browsers render artifacts if dash is 0.
• When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust.
• A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't.
• You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc.)

Again, that's part of what makes GSAP special - we try to figure out workarounds for all these things so your animations "just work". You're welcome to put together your own custom solution and it may work fine for your scenario, but hopefully all the time and headaches our bonus tools solve will make the membership pay for itself very quickly and ultimately make you more profitable as a developer. But there's no pressure to join, really.

 

I hope that helps. 

[tama]

Thank you for your immediate response in detail!!

 

probably I grabbed why the tail of strokes are peeking out.

that was so beneficial to solve the problem.

 

and for now, I decided to deal with it by adding the opacity change 0 to 1 before each "stroke-dashoffset" changing,

but I would consider to get DrawSVGPlugin when I would have needed more complex manipulation with my SVG animation.

thanks again!