Jump to content


DrawSVG - Different animation speeds / times

Recommended Posts

Hi guys,


I just noticed that DrawSVG runs for different durations with different SVGs, at least in my current case.


I made a CodePen with the issue: 

TweenMax.fromTo($(".svg-symbol"), 42, {drawSVG: "0%"}, {drawSVG: "true"});

From this line I would expect all three SVGs to take 42 seconds to be completely drawn. But the first one is the quickest, the second one the second quickest and the third one takes about the 42 expected seconds (did not stop it). Originally it was set to 2 seconds, but then you virtually can not see the first one being drawn at all.


Any help, once again, greatly appreciated!


Best regards,

See the Pen yyJMGZ by LilaQ (@LilaQ) on CodePen

Link to comment
Share on other sites

Hi LilaQ  :)


pls split every sub path from each other :


( The "moveto" commands (or m) establish a new current point / New path Start point )


, and every thing'll works correctly .


pls check this out :


See the Pen gbMWwz by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

Awesome, thanks for the clarification! :)

Link to comment
Share on other sites

I have to extend this question...


This may probably be the same issue that I already posted here: http://greensock.com/forums/topic/11066-drawsvg-queue-inset-paths/


With your solution the paths animate to the correct duration, but now when I want to fill them, everything is filled. For example the globe on the left, the parts inside are supposed to be transparent, only the area between them is supposed to be filled. This works as expected with all the sub-paths in a single path-Element.


How can that be achieved?


Thanks in advance guys, you are awesome! :)

Link to comment
Share on other sites

hmm, tough to know without seeing a demo. It sounds to me like you could solve this by creating your SVG with separate objects that are fills and others that are paths and then you could just animate them completely independently. Consider our demo here: http://codepen.io/GreenSock/pen/jEEoyw where we overlay the filled version of the logo over the strokes.

  • Like 3
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.