Timeline.addPause doesn't work if no tweens are added

[Zadvorsky]

Hello friends.

 

I ran into a strange issue: if you .addPause() to a timeline that has doesn't have any tweens inside it (only callbacks), the timeline isn't paused.

See the example pen. Note that when the pen runs, both 'before pause' and 'after pause' are logged.

If you uncomment either of the tweens, addPause works correctly.

 

I know this looks a little silly, but I ran into this issue in production.

I'm working on a state transition system where states have an 'enter' and an 'exit' method.

The states also have a preload function, which returns a promise.

 

In pseudo code, the transition logic looks like this:

 

const tl = new TimelineLite();

if (currentState) {
  tl.add(currentState.exit());
  tl.add(() => {
    scene.remove(currentState);
  });
}

if (nextState) {
  tl.addPause();
  tl.add(() => {
    scene.add(nextState);
  });
  tl.add(nextState.enter());
  
  nextState.preload().then(() => {
    tl.resume(); // or removePause
  });
}

 

The goal is to begin preload and exit simultaneously. Then when both are done, the next state is added to the scene and it's enter animation is played.

 

The 'enter' and 'exit' methods return a no-op function (if there is no animation for that state), or a tween (if there is an animation for that state).

 

The issue I have is that if there is no current state (or the current state has no exit animation), AND the next state doesn't have an enter animation, the 'scene.add(nextState);' callback is triggered before the preload is complete.

 

I can work around this in code, but I would expect the 'addPause' to work even without any tweens.

Or maybe this is too much of an edge case?

 

EDIT: Actually, it looks like both callbacks in the pen are also triggered if only the 1st tween is uncommented. But if the 2nd (or both) tweens are uncommented, the pause works as expected.

 

See the Pen 0c8217e76810f3fd2a72bd4375b67c5a by zadvorsky (@zadvorsky) on CodePen

[Sahil]

@zadvorski It gets tricky because GSAP mainly is for animation and works with time even if it is tiny fraction it will work. We ran into similar question once and I had to create my own question on this topic, where you can find more detailed explanation.

 

 

You can get around it by adding tiny fraction of time as following demo. Also, please avoid posting private demos as we can't fork them.

 

See the Pen zWYBpR?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

Hi zadvorksi,

 

Thanks for the clear demo.

The demo and thread Sahil referenced are great and should shed some light on how things work.

However, if you need more info on the what, why, how, just let us know.

 

In the meantime I'm going to take this opportunity to promote your work https://codepen.io/zadvorsky/ to the others as I'm a bit of a fan.

 

Carl

 

 

[Zadvorsky]

Thanks for the quick responses.

 

I figured as much, this is just one of those rare instances where the GSAP api doesn't do exactly what I'd expect it to.

 

I will probably solve this with delays as suggested.