self (makes chaining easier)
GreenSock Docs
Back to Docs Home (v2)
TimelineMax
Constructor
Methods
.add()
.addCallback()
.addLabel()
.addPause()
.call()
.clear()
.currentLabel()
.delay()
.duration()
.endTime()
.eventCallback()
TimelineMax.exportRoot()
.from()
.fromTo()
.getActive()
.getChildren()
.getLabelAfter()
.getLabelBefore()
.getLabelsArray()
.getLabelTime()
.getTweensOf()
.invalidate()
.isActive()
.kill()
.pause()
.paused()
.play()
.progress()
.recent()
.remove()
.removeCallBack()
.removeLabel()
.removePause()
.repeat()
.repeatDelay()
.restart()
.resume()
.reverse()
.reversed()
.seek()
.set()
.shiftChildren()
.staggerFrom()
.staggerFromTo()
.staggerTo()
.startTime()
.time()
.timeScale()
.to()
.totalDuration()
.totalProgress()
.totalTime()
.tweenFromTo()
.tweenTo()
.useFrames()
.yoyo()
TimelineMax
.addPause()
.addPause( position:*, callback:Function, params:Array, scope:* ) : *
Inserts a special callback that pauses playback of the timeline at a particular time or label.
Parameters
position: *
(default = +=0) — Controls the placement of the pause in the timeline (by default, it’s the end of the timeline, like “+=0”). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a “+=” or “-=” prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after “myLabel” or "myLabel-=3" to insert it 3 seconds before “myLabel”. If you define a label that doesn’t exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient.
Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video.
callback: Function
(default = null) — An optional callback that should be called immediately after the timeline is paused.
params: Array
(default = null) — An optional array of parameters to pass the callback.
scope: *
(default = null) — The scope in which the callback should be called (basically, what “this” refers to in the function). NOTE: this parameter only exists in the JavaScript and AS2 versions.
Returns : *
Details
Inserts a special callback that pauses playback of the timeline at a particular time or label. This method is more accurate than using a simple callback of your own because it ensures that even if the virtual playhead had moved slightly beyond the pause position, it'll get moved back to precisely the correct position.
Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again.
//insert a pause at exactly 2 seconds into the timeline
timeline.addPause(2);
//insert a pause at "yourLabel"
timeline.addPause("yourLabel");
//insert a pause 3 seconds after "yourLabel" and when that pause occurs, call yourFunction
timeline.addPause("yourLabel+=3", yourFunction);
//insert a pause at exactly 4 seconds and then call yourFunction and pass it 2 parameters, "param1" and "param2" and bind the current scope to the callback
timeline.addPause(4, yourFunction, ["param1", "param2"], this);
The special callback is just a zero-duration tween that utilizes an onComplete, so technically this callback is just like any other, and it is considered a child of the timeline. To remove a pause that was added via addPause() use TimelineMax.removePause().
Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video.