Sequencing function calls across pauses

[willemcc]

Hi there,

 

I have trouble with sequencing function calls in a timeline.

 

This is the order in which I need things to happen:

1. Create a label

2. Pause timeline at the label

3. at click of a button, resume playing the timeline

4. Call a function

 

I tried this:

 

var tl_Timeline = new gsap.timeline();
tl_Timeline
     .add("label1")
     .addPause("label1")
     // when user clicks a button that continues playing the timeline:
    .call(function() { doStuffWhenTimelineContinues() });

 

 

Now, the function is called at the same time the timeline pauses.

And I need it to be called later, after the timeline resumes playing.

 

To accomplish this, I added a dummy animation with an extremely short duration, like this:

 

 

var tl_Timeline = new gsap.timeline();
tl_Timeline
     .add("label1")
     .addPause("label1")
     // when user clicks a button that continues playing the timeline:
    // play dummy animation:
     .to(document.createElement("div"), { alpha: 0, duration: 0.0001 })
    // call function
    .call(function() { doStuffWhenTimelineContinues() });

 

 

 

This works. The function is called after the timeline resumes playing. Yay!

 

But surely there’s got to be a better, less hacky, way of doing this?

 

Thanks for any thought on this!

 

[ZachSaucier]

Hey willemcc and welcome to the GreenSock forums! Thanks for being a Business Green member. We couldn't do what we do without people like you!

 

4 hours ago, willemcc said:

surely there’s got to be a better, less hacky, way of doing this?

I would call the function from the click event listener after you call play on the timeline. For example:

elem.addEventListener("click", function(e) {
  tl.play();
  doStuffWhenTimelineContinues();
});

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

 

Side note: you could rewrite your code provided to be a little simpler:

var tl_Timeline = gsap.timeline(); // no need for 'new'
tl_Timeline
  .addPause("label1") // this creates the label for you
  .to({}, { duration: 0.0001 }) // animating an empty object does the same thing
  .call(doStuffWhenTimelineContinues) // passing in the function reference is adequate

 

[willemcc]

hi Zach,  

 

Thanks for your answer and your tips.

Problem is, we need the function to be part of the timeline itself.

I'll create a Codepen that'll clarify the context a.s.a.p.

 

Thanks!

 

 

[Carl]

If the end goal is to have the function called very shortly after the addPause and you don't want a dummy tween adding space (time), perhaps just use the position parameter on your call like so
 

tl_Timeline
     .add("label1")
     .addPause("label1")
   
    // call function 0.001 seconds later
    .call(function() { doStuffWhenTimelineContinues() }, [], "+=0.001");

the 3 params for call are: callback function, params array, position: https://greensock.com/docs/v3/GSAP/Timeline/call()

 

also, to clean things up you can define you function outside of the timeline and call it like so:

 

.call(doStuffWhenTimelineContinues, [], "+=0.001");

 

 

[OSUblake]

30 minutes ago, Carl said:

also, to clean things up you can define you function outside of the timeline and call it like so:

 

And don't use call.

.add(doStuffWhenTimelineContinues, "+=0.001");

 

[willemcc]

Thanks for looking into this, everyone.

Your approach definitely works but still uses the "+-0.0001" workaround.

I was hoping to be able to use something like ">" (https://greensock.com/3-release-notes#relative-prefixes) in this context.

But I guess that's not possible.

 

This Codepen shows our original code in context: 

See the Pen JjdryLe by willemcc (@willemcc) on CodePen

 

For now we'll use the "+-0.0001" workaround, including your tips to simplify the code.

 

But if you have any ideas on a more elegant approach, that would be most welcome.

 

 

 

[GreenSock]

Yeah, that's not really a bug - you're pausing at a certain time and the timeline should indeed render its state at that time, so if you've got a callback exactly on top of that it'd render.

 

You could certainly write your own little helper method. Or if you wanna be really crafty, you could use an "effect" like this: 

// just register this once, and then all timelines will have an "onResume()" method that you can pass a function to and it'll insert it into the timeline with a 0.0001 delay
gsap.registerEffect({
	name: "onResume",
	extendTimeline: true,
	effect: targets => gsap.delayedCall(0.0001, targets[0])
});

// so in your code it could look like
tl.addPause()
  .onResume(yourFunction)

 

[willemcc]

That's a great approach Jack, I'll use that. Thanks a bunch!