Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

Timeline adds delay not wanted (drawSVG)

Recommended Posts

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

Link to comment
Share on other sites

 

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).

 

Unbenannt.png.074ed407e04106a461bedbd3e23d3cb0.png

 

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 :) 

 

  • Like 4
Link to comment
Share on other sites

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}

  • Like 4
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.
×