will be some type of mix of addPause() with a delay / duration method coming in the future?

[Jonathan]

Hello..

 

in the DOC's there is the addPause() method which Carl brought to my attention after reading Carl's answer on this post..

 

http://forums.greensock.com/topic/8472-right-way-to-put-pause-marker-inside-timeline/?view=findpost&p=33079

 

it got me thinking to see if there will be some type of mixture of addPause() with a delay / duration.. kind of like a addPauseDelay() method coming in the future? 

 

so say in the middle of my timeline, i want to pause the timeline for say 5 seconds and then continue...

 

right now im adding a to() method with an empty {} properties object like this to add a pause with a duration:

tl.add( TweenMax($("#element"), 5, {}) );

in the future are we gonna see any time of pause with a delay / duration?

 

thx

[jamiejefferson]

Is there any particular benefit you're expecting over just adding the 5 seconds of 'empty' space when you want the 'pause'? To me it seems like it would make it more difficult to rationalise absolute timings after the pause if you were to introduce that sort of 'hidden' delay?
 
Hmm, I suppose if you are pausing mid-tween then just adding empty space doesn't really work though...
 

tl.addPause("+=0", timelineResume, [5]);

function timelineResume(duration) {
  TweenLite.delayedCall(duration, this.resume, null, this);
}

Something like this is reusable and gets the job done, and I'm gonna take a stab and say it's probably doing something similar to what an official implementation might anyway. Since the timeline becomes paused and no longer progresses the playhead, you need a separate Tween/Timeline/delayedCall to trigger it to play again.
 
If you are just adding 'blank' space inside a timeline though and don't want to include it as an offset to the next tween, empty tweens are a super simple (and recommended) way to artificially add space. 

tl.to({}, 5, {}); // The target can be empty too

[Carl]

Great discussion guys.

 

I can totally see that pausing for X amount of seconds could be useful, but it gets a little tricky when you consider the following.

 

Lets just assume a magic method existed 

var tl = new TimelineLite();
tl.to(elem, 1, {left:200})
  .pauseFor(2)
  .to(elem, 1, {left:400});

What's the duration of the timeline above? 2 seconds? or do you include the pauseFor amount and make it 4 seconds?

 

if you reverse the timeline after the second tween ends, should the pause work in reverse? What if you reverse() mid-pause at time(3), does the first tween start playing backwards immediately... or do you have to wait for 1 second of pause to expire?

 

While the pauseFor() time is "running"... is the timeline technically paused? 

If so, how would you prevent the timeline from resuming?

 

For instance, lets say that the first tween plays and then you reach the dead-gap of 2 seconds. What if at that time you don't want the timeline to really really pause the timeline and not have it resume after the 2 second "gap"... is there now a reallyPause() method?

 

Please don't read any tone or sarcasm into this. The question is certainly valid. My point in short is that something like this opens up a whole new can of worms.

 

I think adding dead space with a dummy tween or just spacing out your tweens with relative positioning is really the best way to go

var tl = new TimelineLite();
tl.to(elem, 1, {left:200})
  .to(elem, 1, {left:400}, "+=2");

also, you could use callback functions that fire off TweenLite.delayedCall()s to restart the timeline. This way you can also kill those delayedCalls too if you ever need to abort the pause.

[Jonathan]

thanks for the response Carl and Jamie..

 

i just figured since there is the addPause() method to adding a pause to anywhere in the timeline.. if there was a way to just add a paused delay/duration as method as well..

 

so like if you had a slider for example you can add that paused delay without having to add an empty tween for a set duration

 

i was testing with an all GSAP slider where i use empty tweens:

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

.. I see how it can open up a new can of worms regarding all the situations that would have to take into account.. especially when you wanted to go in reverse

 

i have just been using the empty tween solution and using the delayedcall() method..  but was just curious about if there was anything down the pipeline for this type of pause with a duration as a method ..

 

But thank you for replying to my question regarding this

[Rodrigo]

Mhhh perhaps a shorthand method that adds an empty tween, with the possibility to add callbacks and labels, something like this:

var tl = new TimelineLite();

tl.addDelay(time, {callbacks_object}, label, positioning);

Like that you don't mess with the timeline flow and timing, you get the chance to create callbacks when nothing is happening(in terms of animations because the timeline keeps running), respect the playhead's direction and if you add a label you can later kill that particular instance.

 

Of course as Carl pointed out you can achieve the same thing using relative positioning of the timeline's next instance.

 

Also for your codepen Jonathan, what you could do is remove the repeat:-1 of the timeline like that the timeline will repeat based only on onComplete and onReverseComplete callbacks, also there's no need to add the onCompleteParams on the callbacks if you're not passing them into the functions.

 

Happy Tweening!!

[GreenSock]

It's always a balancing act between providing a rich API and tight file sizes and excellent performance. In general, I really try to protect the API from becoming too bloated because it can get overwhelming for folks who are trying to learn it (plus it adds kb). Since this effect is quite easy (and generally would use less code too) with the current API's "position" parameter OR using a regular "delay" on any tween, I'm not inclined to expand the API with a convenience method just for adding delay a 3rd way. Or maybe I'm missing something here - are you guys suggesting something that isn't currently possible with the existing API? 

[Jonathan]

i have just been creating an empty tween or using delayedCall() when i need a paused delay for a specific duration..

 

i understand that you try to keep the API as tight and light as possible! I was just curious since i saw the addPause() method... and thought if there was anything like that but with a duration..

 

but im fine with just using an empty tween or delayedCall() .. thanks for replying Jack!