GreenSock JavaScript API Docs | All Packages | All Classes | Index | Frames No Frames |
TimelineLite

Package | com.greensock
Class | public class TimelineLite
Inheritance | TimelineLite SimpleTimeline Animation Object
Subclasses | TimelineMax

TimelineLite is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without TimelineLite (or its big brother TimelineMax), building complex sequences would be far more cumbersome because you'd need to use the `delay` special property for everything which would make future edits far more tedius. Here is a basic example of a sequence without using TimelineLite (the tedius way):

    TweenLite.to(element, 1, {css:{left:100}});
    TweenLite.to(element, 1, {css:{top:50}, delay:1});
    TweenLite.to(element, 1, {css:{opacity:0}, delay:2});

The above code animates the element's "left" css property to 100, then "top" to 50, and finally "opacity" to 0 (notice the `delay` in all but the first tween). But imagine if you wanted to increase the duration of the first tween to 1.5 - you'd need to adjust every delay thereafter. And what if you want to `pause()` the whole sequence or `restart()` it or `reverse()` it on-the-fly or jump to a specific point in the whole animation? This becomes quite messy (or flat-out impossible), but TimelineLite makes it incredibly simple:

    var tl = new TimelineLite();
    tl.append( TweenLite.to(element, 1, {css:{left:100}}) );
    tl.append( TweenLite.to(element, 1, {css:{top:50}}) );
    tl.append( TweenLite.to(element, 1, {css:{opacity:0}}) );

    //then later, control the whole thing...
    tl.pause();
    tl.resume();
    tl.seek(1.5);
    tl.reverse();
    ...

Or use the convenient `to()` method and chaining to make it much more concise:

    var tl = new TimelineLite();
    tl.to(element, 1, {css:{left:100}}).to(element, 1, {css:{top:50}}).to(element, 1, {css:{opacity:0}});

Now you can feel free to adjust any of the tweens without worrying about trickle-down changes to delays. Increase the duration of that first tween and everything automatically adjusts.

Here are some other benefits and features of TimelineLite:

- Things can overlap on the timeline as much as you want. You have complete control over where tweens/timelines are placed. Most other animation tools can only do basic one-after-the-other sequencing but can't allow things to overlap. Imagine appending a tween that moves an object and you want it to start fading out 0.5 seconds before the end of that tween? With TimelineLite it's easy.
- Add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime.
- Nest timelines within timelines as deeply as you want. This means you can modularize your code and make it far more efficient. Imagine building your app with common animateIn() and animateOut() methods that return a tween or timeline instance, then you can string things together like `myTimeline.append( myObject.animateIn() ).append( myObject.animateOut(), 4).append( myObject2.animateIn(), -0.5)...`
- Speed up or slow down the entire timeline with its `timeScale()` method. You can even tween it to gradually speed up or slow down the animation smoothly.
- Get or set the progress of the timeline using its `progress()` method. For example, to skip to the halfway point, set `myTimeline.progress(0.5);`
- Tween the `time` or `progress` to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forward/backward through the timeline.
- Add `onComplete, onStart, onUpdate,` and/or `onReverseComplete` callbacks using the constructor's `vars` object like `var tl = new TimelineLite({onComplete:myFunction});`
- Kill the tweens of a particular object inside the timeline with `killTweensOf()` or get the tweens of an object with `getTweensOf()` or get all the tweens/timelines in the timeline with `getChildren()`
- By passing `useFrames:true` in the `vars` parameter, you can base the timing on frames instead of seconds. Please note, however, that the timeline's timing mode dictates its childrens' timing mode as well.
- You can export all the tween/timelines from the root (master) timeline anytime into a TimelineLite instance using `TimelineLite.exportRoot()` so that you can `pause()` them all or `reverse()` or alter their `timeScale`, etc. without affecting tweens/timelines that you create in the future. Imagine a game that has all its animation driven by the GreenSock Animation Platform and it needs to pause or slow down while a status screen pops up. Very easy.
- If you need even more features like `repeat, repeatDelay, yoyo, currentLabel(), getLabelAfter(), getLabelBefore(), addCallback(), removeCallback(), getActive()`, AS3 event listeners and more, check out TimelineMax which extends TimelineLite.

SPECIAL PROPERTIES:

You can optionally use the constructor's `vars` parameter to define any of the special properties below (syntax example: `new TimelineLite({onComplete:myFunction, delay:2});`

- delay : Number - Amount of delay in seconds (or frames for frames-based tweens) before the timeline should begin.
- paused : Boolean - If `true`, the timeline will pause itself immediately upon creation (by default, timelines automatically begin playing immediately). If you plan to create a TimelineLite and then populate it later (after one or more frames elapse), it is typically best to set `paused:true` and then `play()` after you populate it.
- onComplete : Function - A function that should be called when the timeline has completed
- onCompleteParams : Array - An Array of parameters to pass the `onComplete` function. For example, `new TimelineLite({onComplete:myFunction, onCompleteParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onCompleteParams:["{self}", "param2"]`
- onCompleteScope : Object - Defines the scope of the onComplete function (what `"this"` refers to inside that function).
- useFrames : Boolean - If `useFrames` is `true`, the timelines's timing will be based on frames instead of seconds because it is intially added to the root frames-based timeline. This causes both its `duration` and `delay` to be based on frames. An animations's timing mode is always determined by its parent `timeline`.
- tweens : Array - To immediately insert several tweens into the timeline, use the `tweens` special property to pass in an Array of TweenLite/TweenMax/TimelineLite/TimelineMax instances. You can use this in conjunction with the `align` and `stagger` special properties to set up complex sequences with minimal code. These values simply get passed to the `insertMultiple()` method.
- align : String - Only used in conjunction with the `tweens` special property when multiple tweens are to be inserted immediately. The value simply gets passed to the `insertMultiple()` method. The default is `"normal"`. Options are:
  - `"sequence"` : aligns the tweens one-after-the-other in a sequence
  - `"start"` : aligns the start times of all of the tweens (ignores delays)
  - `"normal"` : aligns the start times of all the tweens (honors delays)
  The `align` special property does not force all child tweens/timelines to maintain relative positioning, so for example, if you use `"sequence"` and then later change the duration of one of the nested tweens, it does not force all subsequent timelines to change their position. The `align` special property only affects the alignment of the tweens that are initially placed into the timeline through the `tweens` special property of the `vars` object.
- stagger : Number - Only used in conjunction with the `tweens` special property when multiple tweens are to be inserted immediately. It staggers the tweens by a set amount of time in seconds (or in frames if `useFrames` is true). For example, if the stagger value is 0.5 and the "align" property is set to `"start"`, the second tween will start 0.5 seconds after the first one starts, then 0.5 seconds later the third one will start, etc. If the align property is `"sequence"`, there would be 0.5 seconds added between each tween. This value simply gets passed to the `insertMultiple()` method. Default is 0.
- onStart : Function - A function that should be called when the timeline begins (when its `time` changes from 0 to some other value which can happen more than once if the timeline is restarted multiple times).
- onStartParams : Array - An Array of parameters to pass the `onStart` function. For example, `new TimelineLite({onStart:myFunction, onStartParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onStartParams:["{self}", "param2"]`
- onStartScope : Object - Defines the scope of the onStart function (what `"this"` refers to inside that function).
- onUpdate : Function - A function that should be called every time the timeline updates (on every frame while the timeline is active)
- onUpdateParams : Array - An Array of parameters to pass the `onUpdate` function. For example, `new TimelineLite({onUpdate:myFunction, onUpdateParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onUpdateParams:["{self}", "param2"]`
- onUpdateScope : Object - Defines the scope of the onUpdate function (what `"this"` refers to inside that function).
- onReverseComplete : Function - A function that should be called when the timeline has reached its beginning again from the reverse direction. For example, if `reverse()` is called, the timeline will move back towards its beginning and when its `time` reaches 0, `onReverseComplete` will be called. This can also happen if the timeline is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the timeline backwards to (or past) the beginning.
- onReverseCompleteParams : Array - An Array of parameters to pass the `onReverseComplete` function. For example, `new TimelineLite({onReverseComplete:myFunction, onReverseCompleteParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onReverseCompleteParams:["{self}", "param2"]`
- onReverseCompleteScope : Object - Defines the scope of the onReverseComplete function (what `"this"` refers to inside that function).
- autoRemoveChildren : Boolean - If `autoRemoveChildren` is set to `true`, as soon as child tweens/timelines complete, they will automatically get killed/removed. This is normally undesireable because it prevents going backwards in time (like if you want to `reverse()` or set the `progress` lower, etc.). It can, however, improve speed and memory management. The root timelines use `autoRemoveChildren:true`.
- smoothChildTiming : Boolean - Controls whether or not child tweens/timelines are repositioned automatically (changing their `startTime`) in order to maintain smooth playback when properties are changed on-the-fly. For example, imagine that the timeline's playhead is on a child tween that is 75% complete, moving mc.x from 0 to 100 and then that tween's `reverse()` method is called. If `smoothChildTiming` is `false` (the default except for the root timelines), the tween would flip in place, keeping its `startTime` consistent. Therefore the playhead of the timeline would now be at the tween's 25% completion point instead of 75%. Remember, the timeline's playhead position and direction are unaffected by child tween/timeline changes. mc.x would jump from 75 to 25, but the tween's position in the timeline would remain consistent. However, if `smoothChildTiming` is `true`, that child tween's `startTime` would be adjusted so that the timeline's playhead intersects with the same spot on the tween (75% complete) as it had immediately before `reverse()` was called, thus playback appears perfectly smooth. mc.x would still be 75 and it would continue from there as the playhead moves on, but since the tween is reversed now mc.x will travel back towards 0 instead of 100. Ultimately it's a decision between prioritizing smooth on-the-fly playback (`true`) or consistent position(s) of child tweens/timelines (`false`). Some examples of on-the-fly changes to child tweens/timelines that could cause their `startTime` to change when `smoothChildTiming` is `true` are: `reversed, timeScale, progress, totalProgress, time, totalTime, delay, pause, resume, duration,` and `totalDuration`.

View the examples

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | autoRemoveChildren : Boolean If true, child tweens/timelines will be removed as soon as they complete. | SimpleTimeline
|  | data : * A place to store any data you want (initially populated with vars.data if it exists). | Animation
|  | smoothChildTiming : Boolean Controls whether or not child tweens/timelines are repositioned automatically (changing their startTime) in order to maintain smooth playback when properties are changed on-the-fly. | SimpleTimeline
|  | ticker : Shape [static] The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers). | Animation
|  | timeline : SimpleTimeline [Read-only] Parent timeline. | Animation
|  | vars : Object The vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc. | Animation

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | TimelineLite(vars:Object = null) Constructor. | TimelineLite
|  | addLabel(label:String, time:Number):* Adds a label to the timeline, making it easy to mark important positions/times. | TimelineLite
|  | append(value:*, offsetOrLabel:* = 0):* Appends a tween, timeline, callback, or label to the end of the timeline, optionally offsetting its insertion point by a certain amount (to make it overlap with the end of the timeline or leave a gap before its insertion point). | TimelineLite
|  | appendMultiple(tweens:Array, offsetOrLabel:* = 0, align:String = normal, stagger:Number = 0):* Appends multiple tweens/timelines/callbacks/labels to the end of the timeline at once, optionally offsetting the insertion point by a certain amount, aligning them (as a sequence for example), and/or staggering their relative timing. | TimelineLite
|  | call(callback:Function, params:Array = null, scope:* = null, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):* Appends a callback to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as append( TweenLite.delayedCall(...) ) but with less code. | TimelineLite
|  | clear(labels:Boolean = true):* Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too). | TimelineLite
|  | delay(value:Number):* Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin. | Animation
|  | duration(value:Number):* [override] Gets the timeline's duration or, if used as a setter, adjusts the timeline's timeScale to fit it within the specified duration. | TimelineLite
|  | eventCallback(type:String, callback:Function = null, params:Array = null, scope:* = null):* Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback. | Animation
|  | exportRoot(vars:Object = null, omitDelayedCalls:Boolean = true):TimelineLite [static] Seamlessly transfers all tweens, timelines, and [optionally] delayed calls from the root timeline into a new TimelineLite so that you can perform advanced tasks on a seemingly global basis without affecting tweens/timelines that you create after the export. | TimelineLite
|  | from(target:Object, duration:Number, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):* Appends a TweenLite.from() tween to the end of the timeline (or elsewhere) - this is a convenience method that accomplishes exactly the same thing as append( TweenLite.from(...) ) but with less code. | TimelineLite
|  | fromTo(target:Object, duration:Number, fromVars:Object, toVars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):* Appends a TweenLite.fromTo() tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as append( TweenLite.fromTo(...) ) but with less code. | TimelineLite
|  | getChildren(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = true, ignoreBeforeTime:Number = -9999999999):Array Returns an array containing all the tweens and/or timelines nested in this timeline. | TimelineLite
|  | getLabelTime(label:String):Number Returns the time associated with a particular label. | TimelineLite
|  | getTweensOf(target:Object, nested:Boolean = true):Array Returns the tweens of a particular object that are inside this timeline. | TimelineLite
|  | insert(value:*, timeOrLabel:* = 0):* [override] Inserts a tween, timeline, callback, or label into the timeline at a specific time, frame, or label. | TimelineLite
|  | insertMultiple(tweens:Array, timeOrLabel:* = 0, align:String = normal, stagger:Number = 0):* Inserts multiple tweens/timelines/callbacks/labels into the timeline at once, optionally aligning them (as a sequence for example) and/or staggering the timing. | TimelineLite
|  | invalidate():* [override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values. | TimelineLite
|  | kill(vars:Object = null, target:Object = null):* Kills the animation entirely or in part depending on the parameters. | Animation
|  | pause(atTime:* = null, suppressEvents:Boolean = true):* Pauses the instance, optionally jumping to a specific time. | Animation
|  | paused(value:Boolean = false):* Gets or sets the animation's paused state which indicates whether or not the animation is currently paused. | Animation
|  | play(from:* = null, suppressEvents:Boolean = true):* Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). | Animation
|  | progress(value:Number):* Gets or sets the animation's progress which is a value between 0 and 1 indicating the position of the virtual playhead where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. | TimelineLite
|  | remove(value:*):* Removes a tween, timeline, callback, or label from the timeline. | TimelineLite
|  | removeLabel(label:String):* Removes a label from the timeline and returns the time of that label. | TimelineLite
|  | render(time:Number, suppressEvents:Boolean = false, force:Boolean = false):void [override] | SimpleTimeline
|  | restart(includeDelay:Boolean = false, suppressEvents:Boolean = true):* Restarts and begins playing forward from the beginning. | Animation
|  | resume(from:* = null, suppressEvents:Boolean = true):* Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first. | Animation
|  | reverse(from:* = null, suppressEvents:Boolean = true):* Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease. | Animation
|  | reversed(value:Boolean = false):* Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards. | Animation
|  | seek(timeOrLabel:*, suppressEvents:Boolean = true):* [override] Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed. | TimelineLite
|  | set(target:Object, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):* Appends a zero-duration tween to the end of the timeline that sets values immediately (when the virtual playhead reaches that position on the timeline) - this is a convenience method that accomplishes exactly the same thing as append( TweenLite.to(target, 0, {...}) ) but with less code. | TimelineLite
|  | shiftChildren(amount:Number, adjustLabels:Boolean = false, ignoreBeforeTime:Number = 0):* Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too. | TimelineLite
|  | staggerFrom(targets:Array, duration:Number, vars:Object, stagger:Number = 0, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):* Tweens an array of targets from a common set of destination values (using the current values as the destination), but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. | TimelineLite
|  | staggerFromTo(targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):* Tweens an array of targets from and to a common set of values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. | TimelineLite
|  | staggerTo(targets:Array, duration:Number, vars:Object, stagger:Number, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):* Tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. | TimelineLite
|  | startTime(value:Number):* Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined). | Animation
|  | stop():* [deprecated] Pauses the timeline (used for consistency with Flash's MovieClip.stop() functionality, but essentially accomplishes the same thing as pause() without the parameter) | TimelineLite
|  | time(value:Number, suppressEvents:Boolean = false):* Gets or sets the local position of the playhead (essentially the current time), described in seconds (or frames for frames-based animations) which will never be less than 0 or greater than the animation's duration. | Animation
|  | timeScale(value:Number):* Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc. | Animation
|  | to(target:Object, duration:Number, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):* Appends a TweenLite.to() tween to the end of the timeline (or elsewhere) - this is a convenience method that accomplishes exactly the same thing as append( TweenLite.to(...) ) but with less code. | TimelineLite
|  | totalDuration(value:Number):* [override] Gets the timeline's total duration or, if used as a setter, adjusts the timeline's timeScale to fit it within the specified duration. | TimelineLite
|  | totalTime(time:Number, suppressEvents:Boolean = false):* Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax). | Animation
|  | usesFrames():Boolean [READ-ONLY] If true, the timeline's timing mode is frames-based instead of seconds. | TimelineLite

Constructor Detail

TimelineLite | () | Constructor

`public function TimelineLite(vars:Object = null)`

Constructor.

SPECIAL PROPERTIES

The following special properties may be passed in via the constructor's vars parameter, like `new TimelineLite({paused:true, onComplete:myFunction})`

- delay : Number - Amount of delay in seconds (or frames for frames-based tweens) before the timeline should begin.
- paused : Boolean - If `true`, the timeline will pause itself immediately upon creation (by default, timelines automatically begin playing immediately). If you plan to create a TimelineLite and then populate it later (after one or more frames elapse), it is typically best to set `paused:true` and then `play()` after you populate it.
- onComplete : Function - A function that should be called when the timeline has completed
- onCompleteParams : Array - An Array of parameters to pass the `onComplete` function. For example, `new TimelineLite({onComplete:myFunction, onCompleteParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onCompleteParams:["{self}", "param2"]`
- onCompleteScope : Object - Defines the scope of the onComplete function (what `"this"` refers to inside that function).
- useFrames : Boolean - If `useFrames` is `true`, the timelines's timing will be based on frames instead of seconds because it is intially added to the root frames-based timeline. This causes both its `duration` and `delay` to be based on frames. An animations's timing mode is always determined by its parent `timeline`.
- tweens : Array - To immediately insert several tweens into the timeline, use the `tweens` special property to pass in an Array of TweenLite/TweenMax/TimelineLite/TimelineMax instances. You can use this in conjunction with the `align` and `stagger` special properties to set up complex sequences with minimal code. These values simply get passed to the `insertMultiple()` method.
- align : String - Only used in conjunction with the `tweens` special property when multiple tweens are to be inserted immediately. The value simply gets passed to the `insertMultiple()` method. The default is `"normal"`. Options are:
  - `"sequence"`: aligns the tweens one-after-the-other in a sequence
  - `"start"`: aligns the start times of all of the tweens (ignores delays)
  - `"normal"`: aligns the start times of all the tweens (honors delays)
  The `align` special property does not force all child tweens/timelines to maintain relative positioning, so for example, if you use `"sequence"` and then later change the duration of one of the nested tweens, it does not force all subsequent timelines to change their position. The `align` special property only affects the alignment of the tweens that are initially placed into the timeline through the `tweens` special property of the `vars` object.
- stagger : Number - Only used in conjunction with the `tweens` special property when multiple tweens are to be inserted immediately. It staggers the tweens by a set amount of time in seconds (or in frames if `useFrames` is true). For example, if the stagger value is 0.5 and the "align" property is set to `"start"`, the second tween will start 0.5 seconds after the first one starts, then 0.5 seconds later the third one will start, etc. If the align property is `"sequence"`, there would be 0.5 seconds added between each tween. This value simply gets passed to the `insertMultiple()` method. Default is 0.
- onStart : Function - A function that should be called when the timeline begins (when its `time` changes from 0 to some other value which can happen more than once if the timeline is restarted multiple times).
- onStartParams : Array - An Array of parameters to pass the `onStart` function. For example, `new TimelineLite({onStart:myFunction, onStartParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onStartParams:["{self}", "param2"]`
- onStartScope : Object - Defines the scope of the onStart function (what `"this"` refers to inside that function).
- onUpdate : Function - A function that should be called every time the timeline updates (on every frame while the timeline is active)
- onUpdateParams : Array - An Array of parameters to pass the `onUpdate` function. For example, `new TimelineLite({onUpdate:myFunction, onUpdateParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onUpdateParams:["{self}", "param2"]`
- onUpdateScope : Object - Defines the scope of the onUpdate function (what `"this"` refers to inside that function).
- onReverseComplete : Function - A function that should be called when the timeline has reached its beginning again from the reverse direction. For example, if `reverse()` is called, the timeline will move back towards its beginning and when its `time` reaches 0, `onReverseComplete` will be called. This can also happen if the timeline is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the timeline backwards to (or past) the beginning.
- onReverseCompleteParams : Array - An Array of parameters to pass the `onReverseComplete` function. For example, `new TimelineLite({onReverseComplete:myFunction, onReverseCompleteParams:["param1", "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onReverseCompleteParams:["{self}", "param2"]`
- onReverseCompleteScope : Object - Defines the scope of the onReverseComplete function (what `"this"` refers to inside that function).
- autoRemoveChildren : Boolean - If `autoRemoveChildren` is set to `true`, as soon as child tweens/timelines complete, they will automatically get killed/removed. This is normally undesireable because it prevents going backwards in time (like if you want to `reverse()` or set the `progress` lower, etc.). It can, however, improve speed and memory management. The root timelines use `autoRemoveChildren:true`.
- smoothChildTiming : Boolean - Controls whether or not child tweens/timelines are repositioned automatically (changing their `startTime`) in order to maintain smooth playback when properties are changed on-the-fly. For example, imagine that the timeline's playhead is on a child tween that is 75% complete, moving mc.x from 0 to 100 and then that tween's `reverse()` method is called. If `smoothChildTiming` is `false` (the default except for the root timelines), the tween would flip in place, keeping its `startTime` consistent. Therefore the playhead of the timeline would now be at the tween's 25% completion point instead of 75%. Remember, the timeline's playhead position and direction are unaffected by child tween/timeline changes. mc.x would jump from 75 to 25, but the tween's position in the timeline would remain consistent. However, if `smoothChildTiming` is `true`, that child tween's `startTime` would be adjusted so that the timeline's playhead intersects with the same spot on the tween (75% complete) as it had immediately before `reverse()` was called, thus playback appears perfectly smooth. mc.x would still be 75 and it would continue from there as the playhead moves on, but since the tween is reversed now mc.x will travel back towards 0 instead of 100. Ultimately it's a decision between prioritizing smooth on-the-fly playback (`true`) or consistent position(s) of child tweens/timelines (`false`). Some examples of on-the-fly changes to child tweens/timelines that could cause their `startTime` to change when `smoothChildTiming` is `true` are: `reversed, timeScale, progress, totalProgress, time, totalTime, delay, pause, resume, duration,` and `totalDuration`.

Parameters

| `vars:Object` (default = `null`)`` — optionally pass in special properties like `onComplete, onCompleteParams, onUpdate, onUpdateParams, onStart, onStartParams, tweens, align, stagger, delay, useFrames,` and/or `autoRemoveChildren`.

Method Detail

addLabel | () | method

`public function addLabel(label:String, time:Number):*`

Adds a label to the timeline, making it easy to mark important positions/times. You can then reference that label in other methods, like `seek("myLabel")` or `insert(myTween, "myLabel")` or `reverse("myLabel")`. You could also use the `append()` or `insert()` methods to insert/append a label.

Parameters

| `label:String` — The name of the label
| `time:Number` — The time in seconds (or frames for frames-based timelines) at which the label should be inserted. For example, `myTimeline.addLabel("myLabel", 3)` adds the label "myLabel" at 3 seconds into the timeline.

Returns

| `*`

append | () | method |

`public function append(value:*, offsetOrLabel:* = 0):*`

Appends a tween, timeline, callback, or label to the end of the timeline, optionally offsetting its insertion point by a certain amount (to make it overlap with the end of the timeline or leave a gap before its insertion point). This makes it easy to build sequences by continuing to append() tweens or timelines. You can chain append() calls together or use the convenience methods like `to(), from(), fromTo(), call(), set(), staggerTo(), staggerFrom(),` and `staggerFromTo()` to build sequences with minimal code.

To insert the tween/timeline/callback/label at a specific position on the timeline rather than appending it to the end, use the `insert()` method.

If you define a label (string) as the `offsetOrLabel` parameter, the tween/timeline/callback will be inserted wherever that label is, but if the label doesn't exist yet, it will be added to the end of the timeline first and then the tween/timeline/callback will be inserted there. This makes it easier to build things as you go with concise code, adding labels as things get appended.

    //append a tween
    myTimeline.append(TweenLite.to(mc, 1, {x:100}));

    //use the to() convenience method to add several sequenced tweens
    myTimeline.to(mc, 1, {x:50}).to(mc, 1, {y:100}).to(mc2, 1, {alpha:0});

    //append a callback
    myTimeline.append(myFunction);

    //append a label
    myTimeline.append("myLabel");

    //create another timeline and then append it
    var nested = new TimelineLite();
    myTimeline.append(nested);

Parameters

| `value:*` — The tween, timeline, callback, or label to append. You can even pass in an array of them.
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween/timeline/callback should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween/timeline/callback gets appended there. For example, to append a tween 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tween appended so that it overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.

Returns

| `*` — self (makes chaining easier)

See also

insert()
to()
from()
fromTo()
call()
set()
appendMultiple()
insertMultiple()

appendMultiple | () | method |

`public function appendMultiple(tweens:Array, offsetOrLabel:* = 0, align:String = normal, stagger:Number = 0):*`

Appends multiple tweens/timelines/callbacks/labels to the end of the timeline at once, optionally offsetting the insertion point by a certain amount, aligning them (as a sequence for example), and/or staggering their relative timing. You can use the `append()` method instead if you are not defining a `stagger` or `align` (either way works). Check out the `staggerTo()` method for an even easier way to create and append a sequence of evenly-spaced tweens.

Parameters

| `tweens:Array` — An array containing the tweens, timelines, callbacks, and/or labels that should be appended
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tweens/timelines/callbacks gets appended there. For example, to begin appending the tweens 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to begin appending the tweens/timelines/callbacks so that they overlap with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `align:String` (default = `normal`)`` — Determines how the objects will be aligned in relation to each other before getting appended. Options are: TweenAlign.SEQUENCE (aligns the tweens one-after-the-other in a sequence), TweenAlign.START (aligns the start times of all of the tweens (ignores delays)), and TweenAlign.NORMAL (aligns the start times of all the tweens (honors delays)). The default is NORMAL.
| `stagger:Number` (default = `0`)`` — Staggers the tweens by a set amount of time (in seconds) (or in frames for frames-based timelines). For example, if the stagger value is 0.5 and the `"align"` parameter is set to `"start"`, the second one will start 0.5 seconds after the first one starts, then 0.5 seconds later the third one will start, etc. If the align property is `"sequence"`, there would be 0.5 seconds added between each tween. Default is 0.

Returns

| `*` — The array of tweens that were appended

call | () | method |

`public function call(callback:Function, params:Array = null, scope:* = null, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*`

Appends a callback to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as `append( TweenLite.delayedCall(...) )` but with less code. In other words, the following two lines produce identical results:

    myTimeline.append( TweenLite.delayedCall(0, myFunction, ["param1", "param2"]) );
    myTimeline.call(myFunction, ["param1", "param2"]);

This is different than using the `onComplete` special property on the TimelineLite itself because once you append the callback, it stays in place whereas an `onComplete` is always called at the very end of the timeline. For example, if a timeline is populated with a 1-second tween and then you `call(myFunction)`, it is placed at the 1-second spot. Then if you append another 1-second tween, the timeline's duration will now be 2 seconds but the myFunction callback will still be called at the 1-second spot. An `onComplete` would be called at the end (2 seconds).

Keep in mind that you can chain these calls together and use other convenience methods like `to(), fromTo(), set(), staggerTo()`, etc. to build out sequences very quickly:

    //create a timeline that calls myFunction() when it completes
    var tl:TimelineLite = new TimelineLite({onComplete:myFunction});

    //now we'll use chaining, but break each step onto a different line for readability...
    tl.to(mc, 1, {x:100})    //tween mc.x to 100
      .call(myCallback)        //then call myCallback()
      .set(mc, {alpha:0})    //then set mc.alpha to 0.5 immediately
      .call(otherFunction, ["param1", "param2"])    //then call otherFunction("param1", "param2")
      .staggerTo([mc1, mc2, mc3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of mc1, mc2, and mc3 to 45 and stagger the start times by 0.25 seconds

The 4th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the callback should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the callback gets appended there.

Also note that the 5th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the callback is triggered. An offset of -0.5 would mean the new callback gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (5th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.call(myFunction, null, this, 0, 0)` would insert the callback at the very beginning of the timeline and `myTimeline.call(myFunction, null, this, 2, "myLabel")` would insert the callback 2 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 5th parameter, `myTimeline.call(myFunction, null, this, 3)` is identical to defining it as the duration, like `myTimeline.call(myFunction, null, this, 3, myTimeline.duration())`).

    tl.call(myFunction, [mc]);  //appends to the end of the timeline
    tl.call(myFunction, [mc], this, 2);  //appends it with a gap of 2 seconds
    tl.call(myFunction, [mc], this, 0, 0);  //places it at the very beginning of the timeline
    tl.call(myFunction, [mc], this, 2, "myLabel");  //places it 2 seconds after "myLabel"

Parameters

| `callback:Function` — Function to call
| `params:Array` (default = `null`)`` — An Array of parameters to pass the function.
| `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.
| `offsetOrLabel:*` (default = `0`)`` — Amount of seconds (or frames for frames-based timelines) to offset the insertion point of the callback from the end of the timeline. For example, to append the callback 3 seconds after the end of the timeline (leaving a 3-second gap), set the offset to 3. Or to have the callback appended so that it overlaps with the last 2 seconds of the timeline, set the offset to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the callback is inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.call(myFunction, null, 0, 0)` would insert the callback at the very beginning of the timeline and `myTimeline.call(myFunction, null, 2, "myLabel")` would insert the callback 2 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.call(myFunction, null, 0, myTimeline.duration())`).

Returns

| `*` — self (makes chaining easier)

See also

append()
insert()
remove()

clear | () | method |

`public function clear(labels:Boolean = true):*`

Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too). Event callbacks (like onComplete, onUpdate, onStart, etc.) are not removed. If you need to remove event callbacks, use the `eventCallback()` method and set them to null like `myTimeline.eventCallback("onComplete", null);`

Parameters

| `labels:Boolean` (default = `true`)`` — If `true` (the default), labels will be cleared too.

Returns

| `*` — self (makes chaining easier)

duration | () | method |

`override public function duration(value:Number):*`

Gets the timeline's `duration` or, if used as a setter, adjusts the timeline's `timeScale` to fit it within the specified duration. For example, if a TimelineMax instance has a `duration` of 2 and a `repeat` of 3, its `totalDuration` would be 8 (one standard play plus 3 repeats equals 4 total cycles).

Due to the fact that a timeline's `duration` is dictated by its contents, using this method as a setter will simply cause the `timeScale` to be adjusted to fit the current contents into the specified `duration`. For example, if there are 20-seconds worth of tweens in the timeline and you do `myTimeline.duration(10)`, the `timeScale` would be changed to 2. If you checked the `duration` again immediately after that, it would still return 20 because technically that is how long all the child tweens/timelines are but upon playback the speed would be doubled because of the `timeScale`.

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining, like `myAnimation.duration(2).play(1);`

     var currentDuration = myAnimation.duration(); //gets current duration
     myAnimation.duration( 10 ); //adjusts the timeScale of myAnimation so that it fits into exactly 10 seconds on its parent timeline

Parameters

| `value:Number` (default = `NaN`)`` — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

Returns

| `*` — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

See also

totalDuration()
timeScale()

exportRoot | () | method |

`public static function exportRoot(vars:Object = null, omitDelayedCalls:Boolean = true):TimelineLite`

Seamlessly transfers all tweens, timelines, and [optionally] delayed calls from the root timeline into a new TimelineLite so that you can perform advanced tasks on a seemingly global basis without affecting tweens/timelines that you create after the export. For example, imagine a game that uses the GreenSock Animation Platform for all of its animations and at some point during the game, you want to slow everything down to a stop (tweening the `timeScale`) while at the same time animating a new popup window into place:

    var tl = TimelineLite.exportRoot();
    TweenLite.to(tl, 0.5, {timeScale:0});

    //this tween isn't affected because it's created after the export.
    TweenLite.fromTo(myWindow, 1, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1});

You could then re-animate things when you're ready by tweening the `timeScale` back to 1. Or you could use `exportRoot()` to collect all the animations and `pause()` them and then animate the popup screen (or whatever). Then `resume()` that instance or even `reverse()`.

You can `exportRoot()` as many times as you want; all it does is wrap all the loose tweens/timelines/delayedCalls into a TimelineLite which itself gets placed onto the root, so if you `exportRoot()` again, that TimelineLite would get wrapped into another one, etc. Things can be nested as deeply as you want.

Keep in mind, however, that completed tweens/timelines are removed from the root (for automatic garbage collection), so if you `exportRoot()` after a tween completes, it won't be included in the export. The only way around that is to set `autoRemoveChildren` property of the `Animation._rootTimeline` and `Animation._rootFramesTimeline` to `false`, but that is NOT recommended because you'd need to manually `kill()` your tweens/timelines manually to make them eligible for garbage collection.

Parameters

| `vars:Object` (default = `null`)`` — The `vars` parameter that's passed to the TimelineLite's constructor which allows you to define things like onUpdate, onComplete, etc. The `useFrames` special property determines which root timeline gets exported. There are two distinct root timelines - one for frames-based animations (`useFrames:true`) and one for time-based ones. By default, the time-based timeline is exported.
| `omitDelayedCalls:Boolean` (default = `true`)`` — If `true` (the default), delayed calls will be left on the root rather than wrapped into the new TimelineLite. That way, if you `pause()` or alter the `timeScale`, or `reverse()`, they won't be affected. However, in some situations it might be very useful to have them included.

Returns

| `TimelineLite` — A new TimelineLite instance containing the root tweens/timelines

from | () | method |

`public function from(target:Object, duration:Number, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*`

Appends a `TweenLite.from()` tween to the end of the timeline (or elsewhere) - this is a convenience method that accomplishes exactly the same thing as `append( TweenLite.from(...) )` but with less code. In other words, the following two lines produce identical results:

    myTimeline.append( TweenLite.from(mc, 1, {x:100, alpha:0.5}) );
    myTimeline.from(mc, 1, {x:100, alpha:0.5});

Keep in mind that you can chain these calls together and use other convenience methods like `to(), call(), set(), staggerTo()`, etc. to build out sequences very quickly:

    //create a timeline that calls myFunction() when it completes
    var tl:TimelineLite = new TimelineLite({onComplete:myFunction});

    //now we'll use chaining, but break each step onto a different line for readability...
    tl.from(mc, 1, {x:-100})    //tween mc.x from -100
      .to(mc, 1, {y:50})    //then tween mc.y to 50
      .set(mc, {alpha:0})    //then set mc.alpha to 0.5 immediately
      .call(otherFunction)    //then call otherFunction()
      .staggerTo([mc1, mc2, mc3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of mc1, mc2, and mc3 to 45 and stagger the start times by 0.25 seconds

If you don't want to append the tween and would rather have precise control of the insertion point, you can use the additional `offset` and/or `baseTimeOrLabel` parameters. Or use a regular `insert()` like `myTimeline.insert( TweenLite.from(mc, 1, {x:100}), 2.75)`.

The 4th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween gets appended there.

Also note that the 5th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the tween starts. An offset of -0.5 would mean the new tween gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (5th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.from(mc, 1, {x:100}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.from(mc, 1, {x:100}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 5th parameter, `myTimeline.from(mc, 1, {x:100}, 3)` is identical to defining it as the duration, like `myTimeline.from(mc, 1, {x:100}, 3, myTimeline.duration())`).

    tl.from(mc, 1, {x:100});  //appends to the end of the timeline
    tl.from(mc, 1, {x:100}, 2);  //appends it with a gap of 2 seconds
    tl.from(mc, 1, {x:100}, 0, 0);  //places it at the very beginning of the timeline
    tl.from(mc, 1, {x:100}, 2, "myLabel");  //places it 2 seconds after "myLabel"

NOTE: By default, `immediateRender` is `true` in `from()` tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing `immediateRender:false` in the `vars` parameter so that it will wait to render until the tween actually begins.

Parameters

| `target:Object` — Target object (or array of objects) whose properties the tween affects
| `duration:Number` — Duration in seconds (or frames if the timeline is frames-based)
| `vars:Object` — An object defining the starting value for each property that should be tweened as well as any special properties like `onComplete`, `ease`, etc. For example, to tween `mc.x` from 100 and `mc.y` from 200 and then call `myFunction`, do this: `myTimeline.from(mc, 1, {x:100, y:200, onComplete:myFunction});`
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween gets appended there. For example, to append a tween 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tween appended so that it overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the tween is inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.from(mc, 1, {x:100}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.from(mc, 1, {x:100}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.from(mc, 1, {x:100}, 0, myTimeline.duration())`).

Returns

| `*` — self (makes chaining easier)

See also

to()
fromTo()
append()
insert()
remove()

fromTo | () | method |

`public function fromTo(target:Object, duration:Number, fromVars:Object, toVars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*`

Appends a `TweenLite.fromTo()` tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as `append( TweenLite.fromTo(...) )` but with less code. In other words, the following two lines produce identical results:

    myTimeline.append( TweenLite.fromTo(mc, 1, {x:0, alpha:1}, {x:100, alpha:0.5}) );
    myTimeline.fromTo(mc, 1, {x:0, alpha:1}, {x:100, alpha:0.5});

Keep in mind that you can chain these calls together and use other convenience methods like `to(), call(), set(), staggerTo()`, etc. to build out sequences very quickly:

    //create a timeline that calls myFunction() when it completes
    var tl:TimelineLite = new TimelineLite({onComplete:myFunction});

    //now we'll use chaining, but break each step onto a different line for readability...
    tl.fromTo(mc, 1, {x:0}, {x:-100})    //tween mc.x from 0 to -100
      .to(mc, 1, {y:50}, -0.25)        //then tween mc.y to 50, starting it 0.25 seconds before the previous tween ends
      .set(mc, {alpha:0})            //then set mc.alpha to 0.5 immediately
      .call(otherFunction)            //then call otherFunction()
      .staggerTo([mc1, mc2, mc3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of mc1, mc2, and mc3 to 45 and stagger the start times by 0.25 seconds

If you don't want to append the tween and would rather have precise control of the insertion point, you can use the additional `offset` and/or `baseTimeOrLabel` parameters. Or use a regular `insert()` like `myTimeline.insert( TweenLite.fromTo(mc, 1, {x:0}, {x:100}), 2.75)`.

The 5th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween gets appended there.

Also note that the 6th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the tween starts. An offset of -0.5 would mean the new tween gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (6th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 6th parameter, `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 3)` is identical to defining it as the duration, like `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 3, myTimeline.duration())`).

    tl.fromTo(mc, 1, {x:0}, {x:100});  //appends to the end of the timeline
    tl.fromTo(mc, 1, {x:0}, {x:100}, 2);  //appends it with a gap of 2 seconds
    tl.fromTo(mc, 1, {x:0}, {x:100}, 0, 0);  //places it at the very beginning of the timeline
    tl.fromTo(mc, 1, {x:0}, {x:100}, 2, "myLabel");  //places it 2 seconds after "myLabel"

Parameters

| `target:Object` — Target object (or array of objects) whose properties the tween affects
| `duration:Number` — Duration in seconds (or frames if the timeline is frames-based)
| `fromVars:Object` — An object defining the starting value for each property that should be tweened. For example, to tween `mc.x` from 100 and `mc.y` from 200, `fromVars` would look like this: `{x:100, y:200}`.
| `toVars:Object` — An object defining the end value for each property that should be tweened as well as any special properties like `onComplete`, `ease`, etc. For example, to tween `mc.x` from 0 to 100 and `mc.y` from 0 to 200 and then call `myFunction`, do this: `myTimeline.fromTo(mc, 1, {x:0, y:0}, {x:100, y:200, onComplete:myFunction});`
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween gets appended there. For example, to append a tween 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tween appended so that it overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the tween is inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.fromTo(mc, 1, {x:0}, {x:100}, 0, myTimeline.duration())`).

Returns

| `*` — self (makes chaining easier)

See also

to()
from()
append()
insert()
remove()

getChildren | () | method |

`public function getChildren(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = true, ignoreBeforeTime:Number = -9999999999):Array`

Returns an array containing all the tweens and/or timelines nested in this timeline. Callbacks (delayed calls) are considered zero-duration tweens.

Parameters

| `nested:Boolean` (default = `true`)`` — Determines whether or not tweens and/or timelines that are inside nested timelines should be returned. If you only want the "top level" tweens/timelines, set this to `false`.
| `tweens:Boolean` (default = `true`)`` — Determines whether or not tweens (TweenLite and TweenMax instances) should be included in the results
| `timelines:Boolean` (default = `true`)`` — Determines whether or not timelines (TimelineLite and TimelineMax instances) should be included in the results
| `ignoreBeforeTime:Number` (default = `-9999999999`)`` — All children with start times that are less than this value will be ignored.

Returns

| `Array` — an Array containing the child tweens/timelines.

getLabelTime | () | method |

`public function getLabelTime(label:String):Number`

Returns the time associated with a particular label. If the label isn't found, -1 is returned.

Parameters

| `label:String` — Label name

Returns

| `Number` — Time associated with the label (or -1 if there is no such label)

getTweensOf | () | method |

`public function getTweensOf(target:Object, nested:Boolean = true):Array`

Returns the tweens of a particular object that are inside this timeline.

Parameters

| `target:Object` — The target object of the tweens
| `nested:Boolean` (default = `true`)`` — Determines whether or not tweens that are inside nested timelines should be returned. If you only want the "top level" tweens/timelines, set this to false.

Returns

| `Array` — an Array of TweenLite and/or TweenMax instances

insert | () | method |

`override public function insert(value:*, timeOrLabel:* = 0):*`

Inserts a tween, timeline, callback, or label into the timeline at a specific time, frame, or label. This gives you complete control over the insertion point (`append()` always puts things at the end).

     //insert a tween so that it starts at 1 second into the timeline
     myAnimation.insert(TweenLite.to(mc, 2, {x:100}), 1);

     //insert a callback at 1.5 seconds
     myAnimation.insert(myFunction, 1.5);

     //insert a label at 3 seconds
     myAnimation.insert("myLabel", 3);

     //create another timeline that we will insert
     var nested = new TimelineLite();

     //insert the timeline where the "myLabel" label is
     myAnimation.insert(nested, "myLabel");

Parameters

| `value:*` — The tween, timeline, callback, or label to insert
| `timeOrLabel:*` (default = `0`)`` — The time in seconds (or frames for frames-based timelines) or label at which to insert. For example, `myTimeline.insert(myTween, 3)` would insert myTween 3-seconds into the timeline, and `myTimeline.insert(myTween, "myLabel")` would insert it at the "myLabel" label. If you define a label that doesn't exist yet, one is appended to the end of the timeline.

Returns

| `*` — self (makes chaining easier)

See also

append()
insertMultiple()
appendMultiple()

insertMultiple | () | method |

`public function insertMultiple(tweens:Array, timeOrLabel:* = 0, align:String = normal, stagger:Number = 0):*`

Inserts multiple tweens/timelines/callbacks/labels into the timeline at once, optionally aligning them (as a sequence for example) and/or staggering the timing. You can use the `insert()` method instead if you are not defining a `stagger` or `align` (either way works).

Parameters

| `tweens:Array` — An array containing the tweens, timelines, callbacks, or labels that should be inserted
| `timeOrLabel:*` (default = `0`)`` — Time in seconds (or frame if the timeline is frames-based) or label that serves as the insertion point. For example, the number 2 would insert the first object in the array at 2-seconds into the timeline, or "myLabel" would ihsert them wherever "myLabel" is.
| `align:String` (default = `normal`)`` — Determines how the tweens/timelines/callbacks/labels will be aligned in relation to each other before getting inserted. Options are: `"sequence"` (aligns them one-after-the-other in a sequence), `"start"` (aligns the start times of all of the objects (ignoring delays)), and `"normal"` (aligns the start times of all the tweens (honoring delays)). The default is `"normal"`.
| `stagger:Number` (default = `0`)`` — Staggers the tweens by a set amount of time (in seconds) (or in frames for frames-based timelines). For example, if the stagger value is 0.5 and the `"align"` parameter is set to `"start"`, the second one will start 0.5 seconds after the first one starts, then 0.5 seconds later the third one will start, etc. If the align property is `"sequence"`, there would be 0.5 seconds added between each tween. Default is 0.

Returns

| `*` — self (makes chaining easier)

See also

insert()
appendMultiple()
append()
staggerTo()
staggerFrom()
staggerFromTo()

invalidate | () | method |

`override public function invalidate():*`

Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values. When you `invalidate()` an animation, it will be re-initialized the next time it renders and its `vars` object will be re-parsed. The timing of the animation (duration, startTime, delay) will not be affected.

Another example would be if you have a `TweenMax(mc, 1, {x:100, y:100})` that ran when mc.x and mc.y were initially at 0, but now mc.x and mc.y are 200 and you want them tween to 100 again, you could simply `invalidate()` the tween and `restart()` it. Without invalidating first, restarting it would cause the values jump back to 0 immediately (where they started when the tween originally began). When you invalidate a TimelineLite/TimelineMax, it automatically invalidates all of its children.

Returns

| `*` — self (makes chaining easier)

progress | () | method |

`public function progress(value:Number):*`

Gets or sets the animation's progress which is a value between 0 and 1 indicating the position of the virtual playhead where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining, like `myAnimation.progress(0.5).play();`

     var progress = myAnimation.progress(); //gets current progress
     myAnimation.progress( 0.25 ); //sets progress to one quarter finished

Parameters

| `value:Number` (default = `NaN`)`` — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

Returns

| `*` — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

See also

seek()
time()
totalTime()

remove | () | method |

`public function remove(value:*):*`

Removes a tween, timeline, callback, or label from the timeline.

Parameters

| `value:*` — The tween, timeline, callback, or label that should be removed from the timeline

Returns

| `*` — self (makes chaining easier)

removeLabel | () | method |

`public function removeLabel(label:String):*`

Removes a label from the timeline and returns the time of that label. You could also use the `remove()` method to accomplish the same task.

Parameters

| `label:String` — The name of the label to remove

Returns

| `*` — Time associated with the label that was removed

seek | () | method |

`override public function seek(timeOrLabel:*, suppressEvents:Boolean = true):*`

Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed.

If there are any events/callbacks inbetween where the playhead was and the new time, they will not be triggered because by default `suppressEvents` (the 2nd parameter) is `true`. Think of it like picking the needle up on a record player and moving it to a new position before placing it back on the record. If, however, you do not want the events/callbacks suppressed during that initial move, simply set the `suppressEvents` parameter to `false`.

    //jumps to exactly 2 seconds
    myAnimation.seek(2);

    //jumps to exactly 2 seconds but doesn't suppress events during the initial move:
    myAnimation.seek(2, false);

    //jumps to the "myLabel" label
    myAnimation.seek("myLabel");

Parameters

| `timeOrLabel:*` — The time or label to go to.
| `suppressEvents:Boolean` (default = `true`)`` — If `true` (the default), no events or callbacks will be triggered when the playhead moves to the new position defined in the `time` parameter.

Returns

| `*` — self (makes chaining easier)

See also

time()
totalTime()
play()
reverse()
pause()

set | () | method |

`public function set(target:Object, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*`

Appends a zero-duration tween to the end of the timeline that sets values immediately (when the virtual playhead reaches that position on the timeline) - this is a convenience method that accomplishes exactly the same thing as `append( TweenLite.to(target, 0, {...}) )` but with less code. In other words, the following two lines produce identical results:

    myTimeline.append( TweenLite.to(mc, 0, {x:100, alpha:0.5}) );
    myTimeline.set(mc, {x:100, alpha:0.5});

Keep in mind that you can chain these calls together and use other convenience methods like `to(), call(), fromTo(), staggerTo()`, etc. to build out sequences very quickly:

    //create a timeline that calls myFunction() when it completes
    var tl:TimelineLite = new TimelineLite({onComplete:myFunction});

    //now we'll use chaining, but break each step onto a different line for readability...
    tl.to(mc, 1, {x:100})    //tween mc.x to 100
      .set(mc, {alpha:0})    //then set mc.alpha to 0.5 immediately
      .to(mc, 1, {y:50})    //then tween mc.y to 50
      .call(otherFunction)    //then call otherFunction()
      .staggerTo([mc1, mc2, mc3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of mc1, mc2, and mc3 to 45 and stagger the start times by 0.25 seconds

The 3rd parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the set() should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the set() gets appended there.

Also note that the 4th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the set() runs. An offset of -0.5 would mean the new set() gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (4th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.set(obj, {x:100, y:0}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.set(obj, {x:100, y:0}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 4th parameter, `myTimeline.set(obj, {x:100, y:0}, 3)` is identical to defining it as the duration, like `myTimeline.set(obj, {x:100, y:0}, 3, myTimeline.duration())`).

Parameters

| `target:Object` — Target object (or array of objects) whose properties will be set.
| `vars:Object` — An object defining the value to which each property should be set. For example, to set `mc.x` to 100 and `mc.y` to 200, do this: `myTimeline.set(mc, {x:100, y:200});`
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the zero-duration tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the zero-duration tween gets appended there. For example, to append a tween 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the zero-duration tween appended so that it overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the zero-duration tween is inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.set(obj, {x:100, y:0}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.set(obj, {x:100, y:0}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.set(obj, {x:100, y:0}, 0, myTimeline.duration())`).

Returns

| `*` — self (makes chaining easier)

See also

to()
append()
insert()
remove()

shiftChildren | () | method |

`public function shiftChildren(amount:Number, adjustLabels:Boolean = false, ignoreBeforeTime:Number = 0):*`

Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too. This can be useful when you want to prepend children or splice them into a certain spot, moving existing ones back to make room for the new ones.

Parameters

| `amount:Number` — Number of seconds (or frames for frames-based timelines) to move each child.
| `adjustLabels:Boolean` (default = `false`)`` — If `true`, the timing of all labels will be adjusted as well.
| `ignoreBeforeTime:Number` (default = `0`)`` — All children that begin at or after the `startAtTime` will be affected by the shift (the default is 0, causing all children to be affected). This provides an easy way to splice children into a certain spot on the timeline, pushing only the children after that point back to make room.

Returns

| `*` — self (makes chaining easier)

staggerFrom | () | method |

`public function staggerFrom(targets:Array, duration:Number, vars:Object, stagger:Number = 0, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):*`

Tweens an array of targets from a common set of destination values (using the current values as the destination), but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. For example, let's say you have an array containing references to a bunch of text fields that you'd like to drop into place while fading in, all in a staggered fashion with 0.2 seconds between each tween's start time:

    var textFields = [tf1, tf2, tf3, tf4, tf5];
    myTimeline.staggerFrom(textFields, 1, {y:"+150"}, 0.2);

`staggerFrom()` simply loops through the `targets` array and creates a `from()` tween for each object and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the `onCompleteAll` (if you define one) and then appends that TimelineLite to the timeline (as a nested child).

Note that if you define an `onComplete` (or any callback for that matter) in the `vars` parameter, it will be called for each tween rather than the whole sequence. This can be very useful, but if you want to call a function after the entire sequence of tweens has completed, use the `onCompleteAll` parameter (the 7th parameter).

The 5th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point of the first tween from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the staggered tweens gets appended there.

Also note that the 6th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the first staggered tween starts. An offset of -0.5 would mean the first staggered tween gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (6th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 0, 0)` would insert the first tween at the very beginning of the timeline and `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3, "myLabel")` would insert the first tween 3 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 6th parameter, `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3)` is identical to defining it as the duration, like `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3, myTimeline.duration())`).

By default, `immediateRender` is `true` in `from()` tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing `immediateRender:false` in the `vars` parameter so that it will wait to render until the tween actually begins.

JavaScript and AS2 note: - Due to the way JavaScript and AS2 don't maintain scope (what "`this`" refers to, or the context) in function calls, it can be useful to define the scope specifically. Therefore, in the JavaScript and AS2 versions accept a 9th parameter for `onCompleteAllScope`, but that parameter is omitted in the AS3 version.

Parameters

| `targets:Array` — An array of target objects whose properties should be affected
| `duration:Number` — Duration in seconds (or frames if the timeline is frames-based)
| `vars:Object` — An object defining the beginning value for each property that should be tweened as well as any special properties like `ease`. For example, to tween `x` from 100 and `y` from 200 for mc1, mc2, and mc3, staggering their start time by 0.25 seconds and then call `myFunction` when they last one has finished, do this: `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25, 0, null, myFunction})`.
| `stagger:Number` (default = `0`)`` — Amount of time in seconds (or frames if the timeline is frames-based) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: `myTimeline.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+100", alpha:0}, 0.2)`.
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tweens should start being inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tweens get appended there. For example, to start appending the tweens 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tweens appended so that they overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the tweens are inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 0, 0)` would insert the tweens beginning at the very start of the timeline and `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3, "myLabel")` would insert the tweens beginning 3 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.staggerFrom([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 0, myTimeline.duration())`).
| `onCompleteAll:Function` (default = `null`)`` — A function to call as soon as the entire sequence of tweens has completed
| `onCompleteAllParams:Array` (default = `null`)`` — An array of parameters to pass the `onCompleteAll` method.
| `onCompleteAllScope:Object` (default = `null`)`` — The scope for the onCompleteAll call (what "this" should refer to inside that function)

Returns

| `*` — self (makes chaining easier)

See also

staggerTo()
staggerFromTo()

staggerFromTo | () | method |

`public function staggerFromTo(targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):*`

Tweens an array of targets from and to a common set of values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. For example, let's say you have an array containing references to a bunch of text fields that you'd like to fade from alpha:1 to alpha:0 in a staggered fashion with 0.2 seconds between each tween's start time:

    var textFields = [tf1, tf2, tf3, tf4, tf5];
    myTimeline.staggerFromTo(textFields, 1, {alpha:1}, {alpha:0}, 0.2);

`staggerFromTo()` simply loops through the `targets` array and creates a `fromTo()` tween for each object and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the `onCompleteAll` (if you define one) and then appends that TimelineLite to the timeline (as a nested child).

Note that if you define an `onComplete` (or any callback for that matter) in the `vars` parameter, it will be called for each tween rather than the whole sequence. This can be very useful, but if you want to call a function after the entire sequence of tweens has completed, use the `onCompleteAll` parameter (the 8th parameter).

The 6th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point of the first tween from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the staggered tweens gets appended there.

Also note that the 7th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the first staggered tween starts. An offset of -0.5 would mean the first staggered tween gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (7th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 0, 0)` would insert the first tween at the very beginning of the timeline and `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 3, "myLabel")` would insert the first tween 3 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 7th parameter, `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 3)` is identical to defining it as the duration, like `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 3, myTimeline.duration())`).

JavaScript and AS2 note: - Due to the way JavaScript and AS2 don't maintain scope (what "`this`" refers to, or the context) in function calls, it can be useful to define the scope specifically. Therefore, in the JavaScript and AS2 versions accept a 10th parameter for `onCompleteAllScope`, but that parameter is omitted in the AS3 version.

Parameters

| `targets:Array` — An array of target objects whose properties should be affected
| `duration:Number` — Duration in seconds (or frames if the timeline is frames-based)
| `fromVars:Object` — An object defining the starting value for each property that should be tweened. For example, to tween `x` from 100 and `y` from 200, `fromVars` would look like this: `{x:100, y:200}`.
| `toVars:Object` — An object defining the end value for each property that should be tweened as well as any special properties like `ease`. For example, to tween `x` from 0 to 100 and `y` from 0 to 200, staggering the start times by 0.2 seconds and then call `myFunction` when they all complete, do this: `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0, y:0}, {x:100, y:200}, 0.2, 0, null, myFunction});`
| `stagger:Number` (default = `0`)`` — Amount of time in seconds (or frames if the timeline is frames-based) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: `myTimeline.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+100", alpha:0}, 0.2)`.
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tweens should start being inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tweens get appended there. For example, to start appending the tweens 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tweens appended so that they overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the tweens are inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 0, 0)` would insert the tweens beginning at the very start of the timeline and `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 3, "myLabel")` would insert the tweens beginning 3 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.staggerFromTo([mc1, mc2, mc3], 1, {x:0}, {x:100}, 0.2, 0, myTimeline.duration())`).
| `onCompleteAll:Function` (default = `null`)`` — A function to call as soon as the entire sequence of tweens has completed
| `onCompleteAllParams:Array` (default = `null`)`` — An array of parameters to pass the `onCompleteAll` method.
| `onCompleteAllScope:Object` (default = `null`)`` — The scope for the onCompleteAll call (what "this" should refer to inside that function)

Returns

| `*` — self (makes chaining easier)

See also

staggerTo()
staggerFrom()

staggerTo | () | method |

`public function staggerTo(targets:Array, duration:Number, vars:Object, stagger:Number, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):*`

Tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. For example, let's say you have an array containing references to a bunch of text fields that you'd like to fall away and fade out in a staggered fashion with 0.2 seconds between each tween's start time:

    var textFields = [tf1, tf2, tf3, tf4, tf5];
    myTimeline.staggerTo(textFields, 1, {y:"+150", ease:CubicIn.ease}, 0.2);

`staggerTo()` simply loops through the `targets` array and creates a `to()` tween for each object and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the `onCompleteAll` (if you define one) and then appends that TimelineLite to the timeline (as a nested child).

Note that if you define an `onComplete` (or any callback for that matter) in the `vars` parameter, it will be called for each tween rather than the whole sequence. This can be very useful, but if you want to call a function after the entire sequence of tweens has completed, use the `onCompleteAll` parameter (the 7th parameter).

The 5th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point of the first tween from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the staggered tweens gets appended there.

Also note that the 6th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the first staggered tween starts. An offset of -0.5 would mean the first staggered tween gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` (6th) parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 0, 0)` would insert the first tween at the very beginning of the timeline and `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3, "myLabel")` would insert the first tween 3 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 6th parameter, `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3)` is identical to defining it as the duration, like `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3, myTimeline.duration())`).

JavaScript and AS2 note: - Due to the way JavaScript and AS2 don't maintain scope (what "`this`" refers to, or the context) in function calls, it can be useful to define the scope specifically. Therefore, in the JavaScript and AS2 versions accept an extra (9th) parameter for `onCompleteAllScope`.

Parameters

| `targets:Array` — An array of target objects whose properties should be affected
| `duration:Number` — Duration in seconds (or frames if the timeline is frames-based)
| `vars:Object` — An object defining the end value for each property that should be tweened as well as any special properties like `ease`. For example, to tween `x` to 100 and `y` to 200 for mc1, mc2, and mc3, staggering their start time by 0.25 seconds and then call `myFunction` when they last one has finished, do this: `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25, 0, null, myFunction})`.
| `stagger:Number` — Amount of time in seconds (or frames if the timeline is frames-based) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: `myTimeline.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+100", alpha:0}, 0.2)`.
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tweens should start being inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tweens get appended there. For example, to start appending the tweens 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tweens appended so that they overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the tweens are inserted at the end of the timeline plus the `offset` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 0, 0)` would insert the tweens beginning at the very start of the timeline and `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 3, "myLabel")` would insert the tweens beginning 3 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.staggerTo([mc1, mc2, mc3], 1, {x:"+=100"}, 0.2, 0, myTimeline.duration())`).
| `onCompleteAll:Function` (default = `null`)`` — A function to call as soon as the entire sequence of tweens has completed
| `onCompleteAllParams:Array` (default = `null`)`` — An array of parameters to pass the `onCompleteAll` method.
| `onCompleteAllScope:Object` (default = `null`)`` — The scope for the onCompleteAll call (what "this" should refer to inside that function)

Returns

| `*` — self (makes chaining easier)

See also

staggerFrom()
staggerFromTo()

stop | () | method |

`public function stop():*`

[deprecated] Pauses the timeline (used for consistency with Flash's MovieClip.stop() functionality, but essentially accomplishes the same thing as `pause()` without the parameter)

Returns

| `*` — self (makes chaining easier)

to | () | method |

`public function to(target:Object, duration:Number, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*`

Appends a `TweenLite.to()` tween to the end of the timeline (or elsewhere) - this is a convenience method that accomplishes exactly the same thing as `append( TweenLite.to(...) )` but with less code. In other words, the following two lines produce identical results:

    myTimeline.append( TweenLite.to(mc, 1, {x:100, alpha:0.5}) );
    myTimeline.to(mc, 1, {x:100, alpha:0.5});

Keep in mind that you can chain these calls together and use other convenience methods like `fromTo(), call(), set(), staggerTo()`, etc. to build out sequences very quickly:

    //create a timeline that calls myFunction() when it completes
    var tl:TimelineLite = new TimelineLite({onComplete:myFunction});

    //now we'll use chaining, but break each step onto a different line for readability...
    tl.to(mc, 1, {x:100})        //tween mc.x to 100
      .to(mc, 1, {y:50}, -0.25)    //then tween mc.y to 50, starting the tween 0.25 seconds before the previous one ends
      .set(mc, {alpha:0})        //then set mc.alpha to 0.5 immediately
      .call(otherFunction)        //then call otherFunction()
      .staggerTo([mc1, mc2, mc3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of mc1, mc2, and mc3 to 45 and stagger the start times by 0.25 seconds

If you don't want to append the tween and would rather have precise control of the insertion point, you can use the additional `offset` and/or `baseTimeOrLabel` parameters. Or use a regular `insert()` like `myTimeline.insert( TweenLite.to(mc, 1, {x:100}), 2.75)`.

The 4th parameter is the `offsetOrLabel` which can be either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween gets appended there.

Also note that the 5th parameter (`baseTimeOrLabel`) allows you to define a different reference point from which to offset, but since sequencing is so common, the default reference point is the end of the timeline). For example, an offset of 2 would cause there to be a 2-second gap/delay before the tween starts. An offset of -0.5 would mean the new tween gets inserted 0.5 seconds before the end of the timeline, so it will overlap the previous tween(s) by 0.5 seconds.

If you prefer to define a specific time or label to serve as the reference point from which to offset, use the `baseTimeOrLabel` parameter. For example, 0 would be the beginning of the timeline. So `myTimeline.to(mc, 1, {x:100}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.to(mc, 1, {x:100}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline for easy sequencing which is the same as using the timeline's `duration()` (i.e. omitting the 5th parameter, `myTimeline.to(mc, 1, {x:100}, 3)` is identical to defining it as the duration, like `myTimeline.to(mc, 1, {x:100}, 3, myTimeline.duration())`).

    tl.to(mc, 1, {x:100});  //appends to the end of the timeline
    tl.to(mc, 1, {x:100}, 2);  //appends it with a gap of 2 seconds
    tl.to(mc, 1, {x:100}, 0, 0);  //places it at the very beginning of the timeline
    tl.to(mc, 1, {x:100}, 2, "myLabel");  //places it 2 seconds after "myLabel"

Parameters

| `target:Object` — Target object (or array of objects) whose properties the tween affects
| `duration:Number` — Duration in seconds (or frames if the timeline is frames-based)
| `vars:Object` — An object defining the end value for each property that should be tweened as well as any special properties like `onComplete`, `ease`, etc. For example, to tween `mc.x` to 100 and `mc.y` to 200 and then call `myFunction`, do this: `myTimeline.to(mc, 1, {x:100, y:200, onComplete:myFunction})`.
| `offsetOrLabel:*` (default = `0`)`` — Either a number indicating how many seconds (or frames for frames-based timelines) to offset the insertion point from the end of the timeline (positive values create a gap, negative values create an overlap) or a string indicating the label at which the tween should be inserted. If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before the tween gets appended there. For example, to append a tween 3 seconds after the end of the timeline (leaving a 3-second gap), set the offsetOrLabel to 3. Or to have the tween appended so that it overlaps with the last 2 seconds of the timeline, set the offsetOrLabel to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
| `baseTimeOrLabel:*` (default = `null`)`` — By default, the tween is inserted at the end of the timeline plus the `offsetOrLabel` (which is 0 by default), but you can define a specific time or label to serve as the reference point using `baseTimeOrLabel`. For example, 0 would be the beginning of the timeline. So `myTimeline.to(mc, 1, {x:100}, 0, 0)` would insert the tween at the very beginning of the timeline and `myTimeline.to(mc, 1, {x:100}, 2, "myLabel")` would insert the tween 2 seconds after the "myLabel" label. Again, the default is the end of the timeline (for easy sequencing) which is the same as using the timeline's `duration()` (i.e. `myTimeline.to(mc, 1, {x:100}, 0, myTimeline.duration())`).

Returns

| `*` — self (makes chaining easier)

See also

from()
fromTo()
append()
insert()
remove()

totalDuration | () | method |

`override public function totalDuration(value:Number):*`

Gets the timeline's total duration or, if used as a setter, adjusts the timeline's `timeScale` to fit it within the specified duration. For example, if a TimelineMax instance has a `duration` of 2 and a `repeat` of 3, its `totalDuration` would be 8 (one standard play plus 3 repeats equals 4 total cycles).

Due to the fact that a timeline's `totalDuration` is dictated by its contents, using this method as a setter will simply cause the `timeScale` to be adjusted to fit the current contents into the specified `totalDuration`. For example, if there are 20-seconds worth of tweens in the timeline and you do `myTimeline.totalDuration(10)`, the `timeScale` would be changed to 2. If you checked the `totalDuration` again immediately after that, it would still return 20 because technically that is how long all the child tweens/timelines are but upon playback the speed would be doubled because of the `timeScale`.

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining, like `myAnimation.totalDuration(2).play(1);`

    var ctd = myAnimation.totalDuration(); //gets current total duration
    myAnimation.totalDuration( 20 ); //adjusts the timeScale so that myAnimation fits into exactly 20 seconds on its parent timeline

Parameters

| `value:Number` (default = `NaN`)`` — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

Returns

| `*` — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

See also

timeScale()
duration()

usesFrames | () | method |

`public function usesFrames():Boolean`

[READ-ONLY] If `true`, the timeline's timing mode is frames-based instead of seconds. This can only be set to `true` by passing `useFrames:true` in the vars parameter of the constructor, or by nesting this timeline in another whose timing mode is frames-based. An animation's timing mode is always determined by its parent timeline).

Returns

| `Boolean`

Examples
Sample code:

    //create the timeline with an onComplete callback that calls myFunction() when the timeline completes
    var tl = new TimelineLite({onComplete:myFunction});

    //add a tween
    tl.append( new TweenLite(mc, 1, {x:200, y:100}) );

    //add another tween at the end of the timeline (makes sequencing easy)
    tl.append( new TweenLite(mc, 0.5, {alpha:0}) );

    //append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds
    tl.to(mc, 1, {rotation:30}, 0.5);

    //reverse anytime
    tl.reverse();

    //Add a "spin" label 3-seconds into the timeline
    tl.addLabel("spin", 3);

    //insert a rotation tween at the "spin" label (you could also define the insertion point as the time instead of a label)
    tl.insert( new TweenLite(mc, 2, {rotation:"360"}), "spin");

    //go to the "spin" label and play the timeline from there
    tl.play("spin");

    //nest another TimelineLite inside your timeline...
    var nested = new TimelineLite();
    nested.to(mc2, 1, {x:200}));
    tl.append(nested);

Copyright 2008-2012, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.

Thu Dec 20 2012, 04:30 PM -06:00