Jump to content
Search Community

Pause parent timeline?

Dave Stewart test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm beginning to get the hang of animating elements in separate timelines, then adding these to a top-level timeline to played through as part of an overall sequence.

 

In my current project I have a number of child scenes to animate and play through as part of the overall timeline. However, each of these child scenes has to pause in the middle, then instruct a global info panel to update and show itself as it does.

Panel :        A              B              C       
Scene : 1 -----^-----> 2 -----^-----> 3 -----^-----> 

Currently, in order not to have to re-type out the animation for this, I'm creating the code to do this showing-and-hiding using a generator function, which returns a new TimelineLite instance, which is added to the main timeline, one by one.

 

So that gives me the animation, now for the pauses.

 

There's 2 ways I can think to do this:

  1. Add pauses to the main timeline manually
  2. Call the main timeline's pause() function from a callback or eventHandler within the child timelines

Currently, I'm using option 2, which seems to work well. Here's a demo which shows the approach:

 

See the Pen HmJsn?editors=101 by davestewart (@davestewart) on CodePen

 

Is this the best way? Or is there some way events can bubble up from child timelines to the parent?

 

Cheers,

Dave

Link to comment
Share on other sites

Hey Dave,

 

Yep that's a very good approach to pausing a master timeline, since basically it'll pause it after each of the nested ones is completed, no matter how long they are. That gives you a lot of flexibility.

 

Another choice could be use the addPause() method:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#addPause()

 

As you can see is a great way to pause the timeline in several ways. In this case the method can be chained after adding each of the nested timelines:

// animate main box
tl
  .to(box1, 10, {left:800, ease:none}, 0)
  .addPause()

// animate extra boxes
  .add(show(box2), 2.5)
  .addPause()
  .add(show(box3), 7.5);

The great thing about addPause() is that the timeline will be paused at the exact time. If you look at your codepen, sometimes the time when the master timeline is bigger than the nested one's duration. This is because the time the code takes to be executed, so if for any reason you need to rely on a very precise timing, addPause() is the way to go. If your app can spare some milliseconds off, the callback is as good as addPause().

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo,

 

Yeah, aAs you can see from the animation, sometimes the union of the blocks is perfect, sometimes it's off by a couple of pixels. For something like an dialog box showing it might be alright, but there maybe times when its alpha is 0.01 off or something.

 

What would be great would be some kind of programatic way to addPause(), but of course it can't be implemented in show() as show() doesn't know when it will be added!

 

However, after a bit of thinking, I came up with this example, which uses an interim function to achieve exact accuracy:

 

See the Pen wlFDf by davestewart (@davestewart) on CodePen

 

It's possibly even better, as although it doesn't feel as expressive, it's explicit.

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