Jump to content

Jean-Baptiste Janot

DrawSVG - Detect stroke length

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



After 3 hours testing your amazing new plugin, DrawSVG, I may have found a little bug...


As you can see here :   the shape's lengths are not correctly detected.

The second and third icons are fully drawn before the end of the tween.


Any clue on a way of solving it ?


Thanks for your help.

See the Pen emJNGR by anon (@anon) on CodePen

Link to comment
Share on other sites

I think that happens because the 2nd and 3rd shapes have more than one strokes. It may appear as one path but as far as I can see it is not continuous. You could count the svg length by using the following code:

var path = document.querySelector('.obj1 path');

Also since this a percentage tween, svgs with shorter paths will be completed sooner.

Link to comment
Share on other sites

Hi Michael,


I tried to log getTotalLength() for each shapes too, and indeed it seems to be a problem with the shape rather than with Greensock. Well, I guess I need to work on my svg files since I doubt it is a Greensock's issue.


Thanks for your help, I'll be back :)

Link to comment
Share on other sites

What browser are you using? Let me guess - Firefox? There are known issues with Firefox returning incorrect lengths on paths with getTotalLength() - we noted this in the docs. There's nothing we can [realistically] do about it unless we added about 2-3 times as much code to the plugin to try to parse all the points, do the math to calculate all the lengths in the Beziers, etc. which would also make things quite a bit slower. I suspect that Firefox will fix the bug in the near future, so any workarounds like what I just described would end up being useless and just make the plugin much fatter/slower. 


I found that one of the ways to make the calculation more accurate in Firefox is to add more anchors on the shape(s) so that the control points aren't as far from the path. 

  • Like 3
Link to comment
Share on other sites

Hi Jack,


Thank you for your reply.

Unfortunately, no, it's not a Firefox issue, but definitely a global problem with getTotalLength().

I guess paths need to be as simple as possible. If you combine multiple paths (compound path in illustrator), then it returns wrong lengths.

This is annoying, but I guess nothing can be done, except spending quite a lot of time redrawing as simply as possible the svgs, and avoiding mixing paths.


Thank for your answer, and of course for this super handy tool !

Link to comment
Share on other sites

For what it's worth, I found that it generally isn't so much an issue with the complexity of the path as much as how far the control points deviate from the path, so you can have the exact same path, add some anchors in Illustrator (which actually makes it a bit MORE complicated, but it allows the control points to hug closer to the path), and it is more accurate. So it may literally just take some clicks in Illustrator (or a tool like that) to get solid results. 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

After dealing some hours with that problem and redrawing all my artwork, I think it is the heavy use of bezier curves, that influences the calculation of path length, especially counter-rotated or intersecting handles. Adding more anchors do not realy help generally. If anybody can confirm my impression, I would appreciate. After all: its a FF bug, how will one know what the hell is going on.

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.