set() after addPause() - what should we expect?

[hatim]

When I use set() after addPause() in a timeline, the set() takes effect after the previous tween and does not wait for a resume.  Is there a reason why set() is being executed after the previous tween, (the immediateRender is false by default in this case, as far as I know), even though I have 'addPause()' ?

 

const t = gsap.timeline();
t.to(".box", { x: 200, duration: 2});
t.addPause()
t.set(".box", { backgroundColor: "red"}); // Does not wait until resume/play is called
t.to(".box", { x: 10, duration:2 });
t.play();

See the Pen GRNVaLP by hatim (@hatim) on CodePen

[PointC]

Hi @hatim 

 

hmmm... yeah -  I would expect that set() to fire after you resume. I'm not 100% sure but I'd guess that the addPause() and the set() fire on the same tick since the set() is a zero duration tween. I just added a position parameter as a quick experiment and it worked fine.

 

t.set(".box", { backgroundColor: "red"}, "+=0.01");

I think we need to ask @GreenSock if this a bug or there's another reason for the behavior. He should stop by a little later with some more info.

 

Happy tweening.

 

[GreenSock]

Yeah, I would not consider this a bug. It's expected behavior - you're pausing the playhead exactly on TOP of the spot where that set() call is, so it should be triggered. 

 

There was a time a while back when I made things behave the way you were expecting here, but it came back to bite me  Someone else reported it as a bug because they argued that it's very odd/unintuitive if the playhead reached the time where a set() call was, but didn't actually trigger it merely because of the order in which things were inserted into the timeline (the addPause() was inserted first, then the .set()). And then there's the issue of what happens when you play in reverse. It just gets messy and a valid argument could be made for either behavior. 

 

Like @PointC advised, just add a tiny space to get the behavior you wanted. It's much cleaner and more logical that way - it's inherently messy when you've got zero-duration tweens sitting on exactly the same spot as your pause. 

[hatim]

Great thank you all for answering my question and providing a solution.  I can now proceed with my project.  👍