Can we pause a timeline but have the current tween continue to play through?

[kaplan]

Hi, I am making a slideshow of images with a timeline, and I would like to be able to pause the parent timeline but have the current tween of the timeline finish its animation. I can do something like the following: it's not working, but that might be related to my target. Could this work... currentTween.play()?
 

if (this.timeline.isActive()) {
    
    const currentTween = this.timeline.getTweensOf(this.images[this.state.currentIndex-1])[0];
    
    // If there's a currently active tween
    if (currentTween) {
    
    // Pause the main timeline
    this.timeline.pause();
    
    // Play the current tween independently
    currentTween.play();
}

Thanks, 
Dave

See the Pen mdvbryw by kaplan (@kaplan) on CodePen

[GreenSock]

No, that would create all kinds of logic problems. A tween's playhead is always controlled (and synchronized with) its parent timeline. Imagine what would happen if you paused the parent timeline but then played the child...now the child's playhead is totally out of sync with the parent, and then what would happen when you resume() the parent? Unless you moved that child tween's startTime, its playhead would suddenly jump back to where it should line up on the parent's timeline. 

 

Honestly this sounds like a problem with the way you're engineering things. Maybe if you explained the "why" behind your question, that'd help us offer some advice. Perhaps you shouldn't be putting everything into one timeline. Maybe you should keep the tween separate that you're trying to allow to complete. I mean you technically can remove() a tween from its parent timeline and handle it separately, but in all my years of doing this I don't think I've ever seen someone need to do that. 

[ryan_labar]

You could probably do something like this:

See the Pen OJdLMXv by ryan_labar (@ryan_labar) on CodePen

[kaplan]

Thanks, Jack. I follow what you are saying. Playing with my version, I see some jumping when I start back up. 

I will build out a CodePen; I'm sure it will help me.  I'm working on the project locally right now. 

I can describe what I am building: I have a stack of images, and fading the top one down reveals the next.
When that top image fades out, onComplete,  all the images get a z-index shuffle, the faded current image goes to the bottom of the stack and the opacity goes back to 1. 

My original version is working with separate tweens, but it would be better to control the entire group of tweens in a timeline. Then, it would be easier if I wanted to start or stop based on the position of the images in the viewport or with a click, I wondered. The problem is when I pause the timeline, the current image could be mid-fade, creating a double-vision kind of feel. 

@ryan_labar that's pretty cool and illustrates what I'm thinking. :-) I had to look up what && does outside of an if statement! I'm working on my JS skills.

I'm trying to make the slideshow modular, and getting there.  If I can share a link https://midlifeslices.com/blog/what-now has this 1st version slideshow running on there... it's basic... but I'm getting to learn Laravel and GSAP (again).

[GreenSock]

Ah, yeah, that sounds like an engineering thing for sure. Here's how I'd do it...

 

Use a recursive function for transitioning to the next thing. And a delayedCall() to auto-advance which you can pause() or restart() anytime. Sorta like:

 

let autoAdvance = gsap.delayedCall(5, showNext),
    getItem = gsap.utils.wrap(gsap.utils.toArray(".item")),
    curIndex = 0;

function advance(direction) {
  autoAdvance.restart(true);
  let prev = getItem(curIndex),
      next = getItem((curIndex += direction));
  // do your transition
  gsap.to(prev, {...});
  gsap.to(next, {...});
}

Then, you can go forwards or backwards like: 

advance(1);  // forwards
advance(-1); // backwards

And the auto-advance will take care of automatically moving to the next one, but anytime you can just do: 

autoAdvance.pause();
// then later
autoAdvance.restart(true); // or resume()

I hope that helps.