kaplan Posted October 19, 2023 Share Posted October 19, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted October 19, 2023 Share Posted October 19, 2023 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. Link to comment Share on other sites More sharing options...
ryan_labar Posted October 19, 2023 Share Posted October 19, 2023 You could probably do something like this: See the Pen OJdLMXv by ryan_labar (@ryan_labar) on CodePen 1 Link to comment Share on other sites More sharing options...
kaplan Posted October 19, 2023 Author Share Posted October 19, 2023 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). Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 19, 2023 Solution Share Posted October 19, 2023 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now