Jump to content
Search Community

Pause timeline after current step animation is done

Reksa Andhika test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi, long time no ask in this forum, I hope forum still active helping people.

So I have TextPlugin animation, and I want to start animation on hover, and pause on leave.

Problem is, when I try to out hover, the text is paused immediately and make my text looks weird (not readable).

Meanwhile I want to wait the tween/gsap to finish current step first (until text complete to composed), then do pause.

See the Pen PoayOoG by reksaandhika (@reksaandhika) on CodePen

Link to comment
Share on other sites

  • Solution
1 minute ago, Reksa Andhika said:

I hope there's function for this maybe called like timeline.pauseWait()

I don't think that'd be very appropriate. And even if there was a function like pauseWait(), what exactly would you feed to it? How would it know how long to wait, where exactly to pause, etc.? You have a very specific scenario where you've gotta figure out how long before the pause() should kick in based on tweens in the timeline that are spaced a certain way. 

 

There are other ways to accomplish this too. Perhaps you'll find this technique more intuitive: 

See the Pen JjZmvEE?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Hmm make sense,
What I mean, when pauseWait() called, it's like regular pause, but waiting for next tween to complete then pause is trigger, it's like using Promise.

 

Quote

how long to wait?

Calculating by current duration, like first solution you did.

 

Quote

Where exactly to pause?

After current tween complete / on next tween.

 

or maybe the function name can be called timeline.pauseNext() 😅

 

Anyway second solution is more awesome, especially when I have dynamic duration each animation.

Link to comment
Share on other sites

40 minutes ago, Reksa Andhika said:

What I mean, when pauseWait() called, it's like regular pause, but waiting for next tween to complete then pause is trigger, it's like using Promise.

That assumes that the timeline only has sequential tweens, but remember that timelines can have literally hundreds of overlapping tweens (and overlapping by various amounts). So "next tween" is rather ambiguous when you consider you may have many tweens running, all with different end times and other tweens starting at various spots thereafter. See the problem? 

 

Yeah, the second solution is nice and clean for your scenario. 👍

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.
×
×
  • Create New...