While Animating SVG DashOffset using GSAP, the timeline not matches exactly

[Qamar Aziz]

I was trying to animate SVG using the DashOffset property. When the animation ends, the timeline is not aligned with the SVG strokeDashoffset. I know we have to match the exact offset to hide the strokes but, is it possible to make align both?

See the Pen QWoYbZB by azizqamar7 (@azizqamar7) on CodePen

[GreenSock]

Yeah, that's why DrawSVGPlugin is so useful - it handles all that stuff for you, plus it solves a bunch of cross-browser inconsistencies: 

See the Pen poYGjKv by GreenSock (@GreenSock) on CodePen

 

You weren't calculating the length of that path correctly, so the strokeDashoffset wasn't correct. 

 

DrawSVG is a membership benefit of Club GSAP, FYI. Hopefully you'll find that the membership pays for itself very quickly and makes you more profitable. 

[Qamar Aziz]

Yeah, I get it DrawSVG plugin is so cool. I just wanted to try using other methods. 
Thank you so much for the hint. I calculated the path -length and reversed its path using

See the Pen WWPYqQ by enxaneta (@enxaneta) on CodePen

 and it worked as DrawSVG.

See the Pen QWoYbZB?editors=0010 by azizqamar7 (@azizqamar7) on CodePen