DrawSVG moving very fast

[trousersthecat]

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

[PointC]

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.