Jump to content


DrawSVG is animating too fast -- ignoring the DrawSVG Duration setting

Go to solution Solved by MindGamer,

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

I've got a strange problem with DrawSVG animating an SVG graphic I made.


The graphic seems to be animating at a speed much faster than the duration setting.

TweenMax.fromTo(".flourishsvgclass",6, {drawSVG:0}, {drawSVG:"102%"});

This *should* take 6 seconds, but it's over in about 1.


The only thing that I'm doing that's slightly different is that I'm declaring the SVG as a javascript variable.  But I'm not sure why that would make any difference.


You can see the issue in this Codepen:  


Any idea why it's ignoring the duration?

See the Pen yNqVGr by Bangkokian (@Bangkokian) on CodePen

Link to comment
Share on other sites

The JS won't make a difference. I think the problem is your path because it has a lot move commands it in, so it's messing the stroke-dasharray up. Try splitting your graphic up into different paths.

  • Like 1
Link to comment
Share on other sites

  • Solution

Thanks for the response. Unfortunately though, splitting up the graphic into different paths would also change the animation visually.


I've solved the problem just by setting the duration to much longer than it should be.


But it looks like DrawSVG isn't accurately handling time when animating.

Link to comment
Share on other sites

Yeah, I figured you would have to break your animation up into a timeline, but the time is working correctly.


See the Pen YXjvbV by osublake (@osublake) on CodePen

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.