Jump to content


DrawSVG does not fully draw path in FF

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

Having some issuis with DrawSVG in FF34. The Path does not get drawn fully. Other browsers are ok. Could have to do with the getLengthProperty problem in FF.


Experimented with several pathes, that hade this strange behaviour. Some could be fixed by rearranging the points of the pathes, for what reason I can not see. The example in the pen seems to be ok with its path.


The gap seems to be between the 0th nd first Point of the path.

See the Pen JoKRyP by Spica (@Spica) on CodePen

Link to comment
Share on other sites

Thanks for the demo, very helpful.


Yes, I suspect that the FF getLength bug is to blame here.

A suitable fix for this appears to be going beyond 100% 

tl.fromTo("path", 1, {drawSVG:0},{drawSVG:"102%"} "-=1")



Looks good on my end. Does that work for you?

  • Like 2
Link to comment
Share on other sites

Oh, yes. That works fine. Simple and good solution.


Do you have any idea, what kind of paths shapes causes the problem. Not all shapes have that gap.


bth, the official demo

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

suffers the same thing.

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.