Jump to content


DrawSVG moving very fast

Go to solution Solved by PointC,

Recommended Posts

Hello! New here and new to gsap so apologies if I break any rules. I've been staring at this for a while and just might need a new set of eyes.


For some reason the paths are drawing super fast. If I change the duration to something like 6000, some move normally, others are suuuuper slow. 


Could anyone take a look? 

See the Pen jOmmyVz by obe5egiraffe (@obe5egiraffe) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @trousersthecat :)


Welcome to the forum.


Since you've specified the pathLength attribute as "1", you need to write your GSAP tween like this to go from 0 → 1.

tl.fromTo(pj1Paths, { drawSVG: 0 }, { duration: 6, drawSVG: 1 });

Or you can remove that attribute from the elements and your original tween will work correctly.


Just FYI, the duration should be in the vars for GSAP 3 syntax.


I hope that helps.


Happy tweening.



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