Timeline adds delay not wanted (drawSVG)

[jakob zabala]

This solution is fixed. I had to add "-=0.3" speedup to my timeline when all I wanted was the second animation(and 3rd) to start RIGHT after the first animation ended.

 

I looked in the past questions/forums. The only answer was the easing was causing this delay... but my solution has no easing.

 

Going forward I would like to understand why they timeline doesn't play automatically when previous tween finishes.

See the Pen OJWpmrv by jaykobz (@jaykobz) on CodePen

[akapowl]

 

Hey @jakob zabala

 

It looks like GSAP is doing everything as expected here.

 

The problem is your path, which appears to not be a single stroke in one direction but a closed shape - so when you tween to 100% it will be drawn to that bottom point first and then back up to its origin before the next tween starts (which you won't notice though because the individual parts of the stroke lay above each other).

 

 

You can see it in this pen, when you play with the handles

 

See the Pen 2e94e3e4234ffcbbcd608fc9642e56bb by akapowl (@akapowl) on CodePen

 

 

So when tweening to 50% in that first tween of the timeline instead it would pretty much give the behaviour you expected.

But what you probably want is to adjust that path so it is a single stroke only - not forming an enclosed shape.

 

See the Pen af088105b569a9e77a790563e8e60da2 by akapowl (@akapowl) on CodePen

 

 

 

On a sidenote:

If you actually don't want an ease on any tween, make sure to set ease: 'none' because by default GSAP will apply a power1.out to every tween.

 

 

Hope this helps. Happy drawing SVGs  

 

[PointC]

Yep - that path is a little funky.  

 

Here's a fork with a line element instead of a path.

See the Pen 744158c1781707db913f7e0eaac842c1 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[jakob zabala]

Wow I had no idea my simple line was all odd like that.

 

was the only element i didn't inspect properly, Thank you both!!

 

(btw I had ease: 'none'' on my project but for the codepen i forgot to include, thanks for the tip}