Unpause old timeline tween leads timeline to change it current state

[1N54N3]

Hi! i'm new to gsap and i'm wondering how .paused() and .resume() are works 

I have a case, when i need to hide (pause) specific tweens while timeline in playing state
but unhide (unpause) it when timeline is about to pause.

The problem is when I unpause tweens this instantly applies and changes the current state,
even if the tween with duration: 1 added to timeline.time(5), while we paused timeline in timeline.time(9)

I'm tried some tricks with .timeScale(0) and .timeScale(1) and combining other tween methods but nothing works correct :(
Is there any way to unpause tween without affecting the current state?

The pen
To reproduce it just click start button
and then after 2-3 seconds click pause button 

Problem: red box moves after it.
Solution: red box should not moves after it.

See the Pen oNJwbQM by rewriteh (@rewriteh) on CodePen

[mvaneijgen]

What is it you are trying to do? Can you maybe explain your main goal separate from the solution/route you're going down now. What element should do what at what moment? A timeline is for controlling multiple tweens in a sequence, if you don't want that I don't think a timeline is the right fit for your solution. 

 

If the red box should not move, remove it from the timeline and it will not move, right?

 

A duration: 0.0001 is really fast are you sure you're not just looking for .set(), which is a zero duration tween. 

 

Small side note when looking at your example I'd renamed box1 to .red and box2 to .green, I have no idea which was box 1 or 2, so if you could change that in your demo it will be easier for other to understand what is what.

 

See the Pen PoXjWqm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[1N54N3]

27 minutes ago, mvaneijgen said:

What is it you are trying to do? Can you maybe explain your main goal separate from the solution/route you're going down now. What element should do what at what moment? A timeline is for controlling multiple tweens in a sequence, if you don't want that I don't think a timeline is the right fit for your solution. 

 

If the red box should not move, remove it from the timeline and it will not move, right?

 

A duration: 0.0001 is really fast are you sure you're not just looking for .set(), which is a zero duration tween. 

 

Small side note when looking at your example I'd renamed box1 to .red and box2 to .green, I have no idea which was box 1 or 2, so if you could change that in your demo it will be easier for other to understand what is what.

 

 

 

I'm building video editor timeline, and i need to hide/show specific (like red box in codepen above) tweens basing on timeline paused() state.

— While timeline is playing i need to hide some specific tweens, but show them if timeline is paused
— When i unpause tween i'm expect the tween that behind the current time should not change current timeline state, because it behind the current time. 
— I unpause specific tweens only to allow user seek through it, when video is paused.

I'm not looking for set() method because in real case the green box is depends on red box when timeline is paused
(i'm not showed this case on codepen above).

[Rodrigo]

Hi,

 

I read this a few times and spend some time with your codepen example trying to reproduce these steps without any success:

10 hours ago, 1N54N3 said:

To reproduce it just click start button
and then after 2-3 seconds click pause button 

In fact I never even saw the red square move.

 

Is really unclear to me what exactly you are trying to do and I can't seem to grasp this as well:

9 hours ago, 1N54N3 said:

— While timeline is playing i need to hide some specific tweens, but show them if timeline is paused
— When i unpause tween i'm expect the tween that behind the current time should not change current timeline state, because it behind the current time. 
— I unpause specific tweens only to allow user seek through it, when video is paused.

What exactly you mean when you say hide some specific tweens, but show them. A video editor timeline is a big undertaking with several layers of complexity, so trying to fully understand all of it would be near impossible.

 

The best option is to explain what you expect to happen in your demo when clicking each button in order to understand what you're trying to do and give you a nudge in the right direction. Please be as simple as possible in order to correctly grasp your intentions here.

 

Happy Tweening!

[1N54N3]

10 hours ago, Rodrigo said:

I read this a few times and spend some time with your codepen example trying to reproduce these steps without any success:

In fact I never even saw the red square move.

 

I'm sorry. I make some changes and autosave is saved this. Now it should be able to reproduce

 

10 hours ago, Rodrigo said:

What exactly you mean when you say hide some specific tweens, but show them. A video editor timeline is a big undertaking with several layers of complexity, so trying to fully understand all of it would be near impossible.

hide some specific tweens, but show them — I pause some tweens while timeline is about to play, and shows them when timeline is about to pause. The problem is that when i show (unpause tweens) they are breaking the current state of timeline
like in the example above - the red box is changes current state, even if its behind.

 

10 hours ago, Rodrigo said:

The best option is to explain what you expect to happen in your demo when clicking each button in order to understand what you're trying to do and give you a nudge in the right direction. Please be as simple as possible in order to correctly grasp your intentions here.

1. Click Play 
pause fromMove
timeline.play() called
2. Wait 2-3 seconds 
3. Click Pause 
unpause fromMove
timeline.pause() called
4. Now the red box moves. But it should not make any move.

— Pause fromMove to hide it while timeline is unpaused: timeline.paused === false
— Unpause fromMove in third step only for allow to seek through this animation like a timeline.seek(1)

[1N54N3]

I created a new one example with only one target, and it's really easy to reproduce

See the Pen vYvJYwZ by rewriteh (@rewriteh) on CodePen

1. Play
2. Wait green box any move
3. Pause
4. Box jumps forward but it shouldn't

Unpausing any tween should not make any sense of current state

Hi, @Rodrigo may i create a new thread?

[GreenSock]

@1N54N3 I'm not seeing any unexpected behavior. It's important that you understand how tweens work...

 

The very first time a tween renders, it records the start and end values internally so that it can very quickly interpolate between them. 

 

There are two issues I see in your setup: 

1. You're setting overwrite: true on your 2nd tween which will IMMEDIATELY find any tweens of that same target and kill them. So that wipes out your "moveFrom" tween. 
2. You initially paused your timeline, so none of the "to" tweens inside of that will render right away. Then, when you click "play", you're pausing the "moveFrom" tween, thus it never had a chance to render even once and record internally the start/end states. So of course your "moveTo" tween runs from the current value (0). All exactly as expected. Then later, if/when you unpause that "moveFrom" tween, it'll record the start/end values at that point. Since it's a "to" tween, it just uses the CURRENT value as the "from". At the point it renders for the very first time then, you've probably got x at 200 from the other tween. 

Does that clear things up? 

 

You're welcome to use .fromTo() tweens if you need total control of both ends (start/end). Or you can force a render of the tweens in the timeline by doing something like timeline.progress(1).progress(0) before pausing anything internally. 

[1N54N3]

32 minutes ago, GreenSock said:

@1N54N3 I'm not seeing any unexpected behavior. It's important that you understand how tweens work...

I'm sorry but i'm again edited pen and autosave is broke my example. Not it should be able to reproduce
Also i now how tweens and timeline works. I know that its expected behavior. I'm just looking for the solution.

[1N54N3]

1 minute ago, 1N54N3 said:

I'm sorry but i'm again edited this and autosave is broke my example. Not it should be able to reproduce
Also i now how tweens and timeline works. I know that its expected behavior. I'm just looking for the solution.

Screen Recording 2023-09-15 at 11.53.43 PM.mov

In the video above i click play, wait 2s, pause
and the box are jumps because of unpausing paused tween

I want to unpause tween without changing the current state, by unpause

[GreenSock]

5 hours ago, 1N54N3 said:

I want to unpause tween without changing the current state, by unpause

There are fundamental logic flaws in the way you're engineering things (if I'm understanding your goal correctly).

 

When you unpause that first tween, it renders at its end state because the parent timeline's playhead is PAST where that tween ends. Since you pause() the timeline, there's no reason for that 2nd tween to render again at that point because it already rendered there and the playhead hasn't moved. 

 

I'm curious why you're building it that way. If you think about how those tweens are laid out in the timeline, you'd expect x to jump to 200 and then just stay there (the second tween animates x from 200 to 200, meaning it would look like it's doing nothing). That isn't happening because you're short-circuiting things by pausing the first tween, getting the second one to render and lock in its starting/ending values in a way that's abnormal (ignoring the effects of the first tween), and then circling back and unpausing the first tween after the playhead has already passed its end position. Very very odd in my view. 

 

I suspect there's a much cleaner way of accomplishing what you're after that doesn't involve short-circuiting things in odd ways. I mean technically you can force it to render the way you want like this: 

// OLD
pausedFromTweensToggle(false);
timeline.pause();

// NEW
pausedFromTweensToggle(false);
let time = timeline.time(); // record the current time
timeline.progress(0).time(time).pause(); // rewind, then jump back to the current time to force everything to render at that state

See the Pen yLGoGdY?editors=1010 by GreenSock (@GreenSock) on CodePen

[1N54N3]

On 9/16/2023 at 6:23 AM, GreenSock said:

There are fundamental logic flaws in the way you're engineering things (if I'm understanding your goal correctly).

 

When you unpause that first tween, it renders at its end state because the parent timeline's playhead is PAST where that tween ends. Since you pause() the timeline, there's no reason for that 2nd tween to render again at that point because it already rendered there and the playhead hasn't moved. 

 

I'm curious why you're building it that way. If you think about how those tweens are laid out in the timeline, you'd expect x to jump to 200 and then just stay there (the second tween animates x from 200 to 200, meaning it would look like it's doing nothing). That isn't happening because you're short-circuiting things by pausing the first tween, getting the second one to render and lock in its starting/ending values in a way that's abnormal (ignoring the effects of the first tween), and then circling back and unpausing the first tween after the playhead has already passed its end position. Very very odd in my view. 

 

I suspect there's a much cleaner way of accomplishing what you're after that doesn't involve short-circuiting things in odd ways. I mean technically you can force it to render the way you want like this: 

// OLD
pausedFromTweensToggle(false);
timeline.pause();

// NEW
pausedFromTweensToggle(false);
let time = timeline.time(); // record the current time
timeline.progress(0).time(time).pause(); // rewind, then jump back to the current time to force everything to render at that state

 

 

Thanks. It works perfectly.
Also thanks for explanation how it works behind the scene.
Maybe i tried this solution earlier, but without some fixes I couldn't get it work. With explanation i understood what i need to fix and i did it.