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

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

TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without TimelineMax (or its little brother TimelineLite), 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:

    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 repeat it twice? This becomes quite messy (or flat-out impossible), but TimelineMax makes it incredibly simple:

    var tl = new TimelineMax({repeat:2, repeatDelay:1});
    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 even shorter:

    var tl = new TimelineMax();
    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 TimelineMax:

- 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 TimelineMax it's easy.
- Add labels, callbacks, 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()` or `totalProgress()` methods. For example, to skip to the halfway point, set `myTimeline.progress(0.5);`
- Tween the `time, totalTime, progress,` or `totalProgress` to fastforward/rewind the timeline. You could even attach a slider to one of these to give the user the ability to drag forward/backward through the timeline.
- Add `onComplete, onStart, onUpdate, onRepeat` and/or `onReverseComplete` callbacks using the constructor's `vars` object like `var tl = new TimelineMax({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()`
- Set the timeline to repeat any number of times or indefinitely. You can even set a delay between each repeat cycle and/or cause the repeat cycles to yoyo, appearing to reverse direction every other cycle.
- listen for START, UPDATE, REPEAT, REVERSE_COMPLETE, and COMPLETE events.
- get the active tweens in the timeline with getActive().
- 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.
- Get the `currentLabel()` or find labels at various positions in the timeline using `getLabelAfter()` and `getLabelBefore()`
- 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.

SPECIAL PROPERTIES:

You can optionally use the constructor's `vars` parameter to define any of the special properties below (syntax example: `new TimelineMax({onComplete:myFunction, repeat:2, repeatDelay:1, yoyo:true});`

- 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 TimelineMax 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 TimelineMax({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 TimelineMax({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 TimelineMax({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 TimelineMax({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`.
- repeat : Number - Number of times that the timeline should repeat after its first iteration. For example, if `repeat` is 1, the timeline will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. `repeat` should always be an integer.
- repeatDelay : Number - Amount of time in seconds (or frames for frames-based timelines) between repeats. For example, if `repeat` is 2 and `repeatDelay` is 1, the timeline will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat.
- yoyo : Boolean - If `true`, every other `repeat` cycle will run in the opposite direction so that the timeline appears to go back and forth (forward then backward). This has no affect on the "`reversed`" property though. So if `repeat` is 2 and `yoyo` is `false`, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if `yoyo` is `true`, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.
- onRepeat : Function - A function that should be called each time the timeline repeats
- onRepeatParams : Array - An Array of parameters to pass the onRepeat function. For example, `new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onRepeatParams:["{self}", "param2"]`
- onRepeatScope : Object - Defines the scope of the onRepeat function (what `"this"` refers to inside that function).

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
--- | --- | ---
|  | TimelineMax(vars:Object = null) Constructor. | TimelineMax
|  | addCallback(callback:Function, timeOrLabel:*, params:Array = null, scope:* = null):TimelineMax Inserts a callback at a particular time or label. | TimelineMax
|  | 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
|  | currentLabel(value:String = null):* Gets the closest label that is at or before the current time, or jumps to a provided label (behavior depends on whether or not you pass a parameter to the method). | TimelineMax
|  | 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
|  | getActive(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = false):Array Returns the tweens/timelines that are currently active in the timeline, meaning the timeline's playhead is positioned on the child tween/timeline and the child isn't paused. | TimelineMax
|  | 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
|  | getLabelAfter(time:Number):String Returns the next label (if any) that occurs after the time parameter. | TimelineMax
|  | getLabelBefore(time:Number):String Returns the previous label (if any) that occurs before the time parameter. | TimelineMax
|  | getLabelsArray():Array Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline. | TimelineMax
|  | 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. | TimelineMax
|  | 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):* [override] Gets or sets the timeline's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. | TimelineMax
|  | remove(value:*):* Removes a tween, timeline, callback, or label from the timeline. | TimelineLite
|  | removeCallback(callback:Function, timeOrLabel:* = null):TimelineMax Removes a callback from a particular time or label. | TimelineMax
|  | 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
|  | repeat(value:Number = 0):* Gets or sets the number of times that the timeline should repeat after its first iteration. | TimelineMax
|  | repeatDelay(value:Number = 0):* Gets or sets the amount of time in seconds (or frames for frames-based timelines) between repeats. | TimelineMax
|  | 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):* [override] Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays. | TimelineMax
|  | 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 or sets the total duration of the timeline in seconds (or frames for frames-based timelines) including any repeats or repeatDelays. | TimelineMax
|  | totalProgress(value:Number):* Gets or sets the timeline's totalProgress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. | TimelineMax
|  | 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
|  | tweenFromTo(fromTimeOrLabel:*, toTimeOrLabel:*, vars:Object = null):TweenLite Creates a linear tween that essentially scrubs the playhead from a particular time or label to another time or label and then stops. | TimelineMax
|  | tweenTo(timeOrLabel:*, vars:Object = null):TweenLite Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. | TimelineMax
|  | usesFrames():Boolean [READ-ONLY] If true, the timeline's timing mode is frames-based instead of seconds. | TimelineLite
|  | yoyo(value:Boolean = false):* Gets or sets the timeline's yoyo state, where true causes the timeline to go back and forth, alternating backward and forward on each repeat. | TimelineMax

Constructor Detail

TimelineMax | () | Constructor

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

Constructor.

SPECIAL PROPERTIES

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

- 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 TimelineMax 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 TimelineMax({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 TimelineMax({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 TimelineMax({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 TimelineMax({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`.
- repeat : Number - Number of times that the timeline should repeat after its first iteration. For example, if `repeat` is 1, the timeline will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. `repeat` should always be an integer.
- repeatDelay : Number - Amount of time in seconds (or frames for frames-based timelines) between repeats. For example, if `repeat` is 2 and `repeatDelay` is 1, the timeline will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat.
- yoyo : Boolean - If `true`, every other `repeat` cycle will run in the opposite direction so that the timeline appears to go back and forth (forward then backward). This has no affect on the "`reversed`" property though. So if `repeat` is 2 and `yoyo` is `false`, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if `yoyo` is `true`, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.
- onRepeat : Function - A function that should be called each time the timeline repeats
- onRepeatParams : Array - An Array of parameters to pass the onRepeat function. For example, `new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]});` To self-reference the timeline instance itself in one of the parameters, use `"{self}"`, like: `onRepeatParams:["{self}", "param2"]`
- onRepeatScope : Object - Defines the scope of the onRepeat function (what `"this"` refers to inside that function).

Parameters

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

Method Detail

addCallback | () | method

`public function addCallback(callback:Function, timeOrLabel:*, params:Array = null, scope:* = null):TimelineMax`

Inserts a callback at a particular time or label. The callback is technically considered a zero-duration tween, so if you getChildren() there will be a tween returned for each callback. You can discern a callback from other tweens by the fact that its target is a function matching its `vars.onComplete` and its `duration` is zero.

If your goal is to append the callback to the end of the timeline, it would be easier (more concise) to use the `call()` method. Technically the `insert()` and `append()` methods can accommodate adding a callback (like `myTimeline.insert(myFunction, 2)` or `myTimeline.append(myFunction)`) but they don't accommodate parameters.

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, the JavaScript and AS2 versions accept a 4th parameter to [optionally] define the `scope`, but it is omitted in AS3.

Parameters

| `callback:Function` — The function to be called
| `timeOrLabel:*` — The time in seconds (or frames for frames-based timelines) or label at which the callback should be inserted. For example, `myTimeline.addCallback(myFunction, 3)` would call myFunction() 3 seconds into the timeline, and `myTimeline.addCallback(myFunction, "myLabel")` would call it at the "myLabel" label.
| `params:Array` (default = `null`)`` — An Array of parameters to pass the callback
| `scope:*` (default = `null`)`` — The scope in which the callback should be called (basically, what "this" refers to in the function). NOTE: this parameter only pertains to the JavaScript and AS2 versions; it is omitted in AS3.

Returns

| `TimelineMax` — self (makes chaining easier)

See also

call()
insert()
append()
removeCallback()

currentLabel | () | method |

`public function currentLabel(value:String = null):*`

Gets the closest label that is at or before the current time, or jumps to a provided label (behavior depends on whether or not you pass a parameter to the method).

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.

Parameters

| `value:String` (default = `null`)`` — 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

getLabelAfter()
getLabelBefore()

getActive | () | method |

`public function getActive(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = false):Array`

Returns the tweens/timelines that are currently active in the timeline, meaning the timeline's playhead is positioned on the child tween/timeline and the child isn't paused.

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 = `false`)`` — Determines whether or not child timelines (TimelineLite and TimelineMax instances) should be included in the results

Returns

| `Array` — an Array of active tweens/timelines

getLabelAfter | () | method |

`public function getLabelAfter(time:Number):String`

Returns the next label (if any) that occurs after the `time` parameter. It makes no difference if the timeline is reversed ("after" means later in the timeline's local time zone). A label that is positioned exactly at the same time as the `time` parameter will be ignored.

You could use `getLabelAfter()` in conjunction with `tweenTo()` to make the timeline tween to the next label like this:

`myTimeline.tweenTo( myTimeline.getLabelAfter() );`

Parameters

| `time:Number` (default = `NaN`)`` — Time after which the label is searched for. If you do not pass a time in, the current time will be used.

Returns

| `String` — Name of the label that is after the time passed to getLabelAfter()

See also

getLabelBefore()
currentLabel()

getLabelBefore | () | method |

`public function getLabelBefore(time:Number):String`

Returns the previous label (if any) that occurs before the `time` parameter. It makes no difference if the timeline is reversed ("before" means earlier in the timeline's local time zone). A label that is positioned exactly at the same time as the `time` parameter will be ignored.

You could use `getLabelBefore()` in conjunction with `tweenTo()` to make the timeline tween back to the previous label like this:

`myTimeline.tweenTo( myTimeline.getLabelBefore() );`

Parameters

| `time:Number` (default = `NaN`)`` — Time before which the label is searched for. If you do not pass a time in, the current time will be used.

Returns

| `String` — Name of the label that is before the time passed to getLabelBefore()

See also

getLabelBefore()
currentLabel()

getLabelsArray | () | method |

`public function getLabelsArray():Array`

Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline. For example, to loop through all the labels in order and `trace()` them to the screen (or `console.log()` in JavaScript):

    var labels = myTimeline.getLabelsArray();
    for (var i = 0; i < labels.length; i++) {
        trace("label name: " + labels[i].name + ", time: " + labels[i].time); //or in JS, console.log("label name: " + labels[i].name + ", time: " + labels[i].time);
    }

Note: changing the values in this array will have no effect on the actual labels inside the TimelineMax. To add/remove labels, use the corresponding methods (`addLabel(), removeLabel()`).

Returns

| `Array` — An array of generic objects (one for each label) with a "name" property and a "time" property in the order they occur in the TimelineMax.

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 |

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

Gets or sets the timeline's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. If the timeline has a non-zero `repeat` defined, `progress` and `totalProgress` will be different because `progress` doesn't include any repeats or repeatDelays whereas `totalProgress` does. For example, if a TimelineMax instance is set to repeat once, at the end of the first cycle `totalProgress` would only be 0.5 whereas `progress` would be 1. If you watched both properties over the course of the entire animation, you'd see `progress` go from 0 to 1 twice (once for each cycle) in the same time it takes the `totalProgress` to go from 0 to 1 once.

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 `myTimeline.progress(0.5).play();`

    var progress = myTimeline.progress(); //gets current progress
    myTimeline.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

totalProgress()
seek()
time()
totalTime()

removeCallback | () | method |

`public function removeCallback(callback:Function, timeOrLabel:* = null):TimelineMax`

Removes a callback from a particular time or label. If the `timeOrLabel` parameter is null, all callbacks of that function are removed from the timeline.

Parameters

| `callback:Function` — callback function to be removed
| `timeOrLabel:*` (default = `null`)`` — the time in seconds (or frames for frames-based timelines) or label from which the callback should be removed. For example, `myTimeline.removeCallback(myFunction, 3)` would remove the callback from 3-seconds into the timeline, and `myTimeline.removeCallback(myFunction, "myLabel")` would remove it from the "myLabel" label, and `myTimeline.removeCallback(myFunction, null)` would remove ALL callbacks of that function regardless of where they are on the timeline.

Returns

| `TimelineMax` — self (makes chaining easier)

See also

addCallback()
call()
killTweensOf()

repeat | () | method |

`public function repeat(value:Number = 0):*`

Gets or sets the number of times that the timeline should repeat after its first iteration. For example, if `repeat` is 1, the timeline will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. `repeat` should always be an integer.

To cause the repeats to alternate between forward and backward, set `yoyo` to `true`. To add a time gap between repeats, use `repeatDelay`. You can set the initial `repeat` value via the `vars` parameter, like:

`var tl = new TimelineMax({repeat:2});`

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 `myTimeline.repeat(2).yoyo(true).play();`

    var repeat = myTimeline.repeat(); //gets current repeat value
    myTimeline.repeat(2); //sets repeat to 2

Parameters

| `value:Number` (default = `0`)`` — 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

repeatDelay()
yoyo()

repeatDelay | () | method |

`public function repeatDelay(value:Number = 0):*`

Gets or sets the amount of time in seconds (or frames for frames-based timelines) between repeats. For example, if `repeat` is 2 and `repeatDelay` is 1, the timeline will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat. You can set the initial `repeatDelay` value via the `vars` parameter, like:

`var tl = new TimelineMax({repeat:2, repeatDelay:1});`

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 `myTimeline.repeat(2).yoyo(true).repeatDelay(0.5).play();`

    var repeatDelay = myTimeline.repeatDelay(); //gets current repeatDelay value
    myTimeline.repeatDelay(2); //sets repeatDelay to 2

Parameters

| `value:Number` (default = `0`)`` — 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

repeat()
yoyo()

time | () | method |

`override public function time(value:Number, suppressEvents:Boolean = false):*`

Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays. If the timeline has a non-zero `repeat`, its `time` goes back to zero upon repeating even though the `totalTime` continues forward linearly (or if `yoyo` is `true`, the `time` alternates between moving forward and backward). `time` never exceeds the duration whereas the `totalTime` reflects the overall time including any repeats and repeatDelays.

For example, if a TimelineMax instance has a `duration` of 2 and a repeat of 3, `totalTime` will go from 0 to 8 during the course of the timeline (plays once then repeats 3 times, making 4 total cycles) whereas `time` would go from 0 to 2 a total of 4 times.

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.

    var currentTime = myTimeline.time(); //gets current time
    myTimeline.time(2); //sets time, jumping to new value just like seek().

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. Negative values will be interpreted from the END of the animation.
| `suppressEvents:Boolean` (default = `false`)`` — If `true`, no events or callbacks will be triggered when the playhead moves to the new position defined in the `value` parameter.

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()
play()
reverse()
pause()
totalTime()

totalDuration | () | method |

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

Gets or sets the total duration of the timeline in seconds (or frames for frames-based timelines) including any repeats or repeatDelays. `duration`, by contrast, does NOT include repeats and repeatDelays. For example, if the timeline has a `duration` of 10, a `repeat` of 1 and a `repeatDelay` of 2, the `totalDuration` would be 22.

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.

    var total = myTimeline.totalDuration(); //gets total duration
    myTimeline.totalDuration(10); //sets the total duration

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. Negative values will be interpreted from the END of the animation.

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

duration()
timeScale()

totalProgress | () | method |

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

Gets or sets the timeline's totalProgress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. If the timeline has a non-zero `repeat` defined, `progress` and `totalProgress` will be different because `progress` doesn't include any repeats or repeatDelays whereas `totalProgress` does. For example, if a TimelineMax instance is set to repeat once, at the end of the first cycle `totalProgress` would only be 0.5 whereas `progress` would be 1. If you watched both properties over the course of the entire animation, you'd see `progress` go from 0 to 1 twice (once for each cycle) in the same time it takes the `totalProgress` to go from 0 to 1 once.

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 `myTimeline.totalProgress(0.5).play();`

    var progress = myTimeline.totalProgress(); //gets total progress
    myTimeline.totalProgress( 0.25 ); //sets total 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

progress()
seek()
time()
totalTime()

tweenFromTo | () | method |

`public function tweenFromTo(fromTimeOrLabel:*, toTimeOrLabel:*, vars:Object = null):TweenLite`

Creates a linear tween that essentially scrubs the playhead from a particular time or label to another time or label and then stops. If you plan to sequence multiple playhead tweens one-after-the-other, `tweenFromTo()` is better to use than `tweenTo()` because it allows the duration to be determined immediately, ensuring that subsequent tweens that are appended to a sequence are positioned appropriately. For example, to make the TimelineMax play from the label "myLabel1" to the "myLabel2" label, and then from "myLabel2" back to the beginning (a time of 0), simply do:

    var tl:TimelineMax = new TimelineMax();
    tl.append( myTimeline.tweenFromTo("myLabel1", "myLabel2") );
    tl.append( myTimeline.tweenFromTo("myLabel2", 0);

If you want advanced control over the tween, like adding an onComplete or changing the ease or adding a delay, just pass in a vars object with the appropriate properties. For example, to tween from the start (0) to the 5-second point on the timeline and then call a function named `myFunction` and pass in a parameter that references this TimelineMax and use a `StrongOut` ease, you'd do:

`myTimeline.tweenFromTo(0, 5, {onComplete:myFunction, onCompleteParams:[myTimeline], ease:StrongOut.ease});`

Remember, this method simply creates a TweenLite instance that tweens the `time()` of your timeline. So you can store a reference to that tween if you want, and you can `kill()` it anytime. Also note that `tweenFromTo()` does NOT affect the timeline's `reversed` property. So if your timeline is oriented normally (not reversed) and you tween to a time/label that precedes the current time, it will appear to go backwards but the `reversed` property will not change to `true`. Also note that `tweenFromTo()` pauses the timeline immediately before tweening its `time()`, and it does not automatically resume after the tween completes. If you need to resume playback, you can always use an onComplete to call the `resume()` method.

Parameters

| `fromTimeOrLabel:*` — The beginning time in seconds (or frame if the timeline is frames-based) or label from which the timeline should play. For example, `myTimeline.tweenTo(0, 5)` would play from 0 (the beginning) to the 5-second point whereas `myTimeline.tweenFromTo("myLabel1", "myLabel2")` would play from "myLabel1" to "myLabel2".
| `toTimeOrLabel:*` — The destination time in seconds (or frame if the timeline is frames-based) or label to which the timeline should play. For example, `myTimeline.tweenTo(0, 5)` would play from 0 (the beginning) to the 5-second point whereas `myTimeline.tweenFromTo("myLabel1", "myLabel2")` would play from "myLabel1" to "myLabel2".
| `vars:Object` (default = `null`)`` — An optional vars object that will be passed to the TweenLite instance. This allows you to define an onComplete, ease, delay, or any other TweenLite special property. onInit is the only special property that is not available (`tweenFromTo()` sets it internally)

Returns

| `TweenLite` — TweenLite instance that handles tweening the timeline between the desired times/labels.

See also

tweenTo()
seek()

tweenTo | () | method |

`public function tweenTo(timeOrLabel:*, vars:Object = null):TweenLite`

Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. For example, to make the TimelineMax play to the "myLabel2" label, simply do:

`myTimeline.tweenTo("myLabel2");`

If you want advanced control over the tween, like adding an onComplete or changing the ease or adding a delay, just pass in a `vars` object with the appropriate properties. For example, to tween to the 5-second point on the timeline and then call a function named `myFunction` and pass in a parameter that's references this TimelineMax and use a `StrongOut` ease, you'd do:

`myTimeline.tweenTo(5, {onComplete:myFunction, onCompleteParams:[myTimeline], ease:StrongOut.ease});`

Remember, this method simply creates a TweenLite instance that pauses the timeline and then tweens the `time()` of the timeline. So you can store a reference to that tween if you want, and you can kill() it anytime. Also note that `tweenTo()` does NOT affect the timeline's `reversed` state. So if your timeline is oriented normally (not reversed) and you tween to a time/label that precedes the current time, it will appear to go backwards but the `reversed` state will not change to `true`. Also note that `tweenTo()` pauses the timeline immediately before tweening its `time()`, and it does not automatically resume after the tween completes. If you need to resume playback, you could always use an onComplete to call the timeline's `resume()` method.

If you plan to sequence multiple playhead tweens one-after-the-other, it is typically better to use `tweenFromTo()` so that you can define the starting point and ending point, allowing the duration to be accurately determined immediately.

Parameters

| `timeOrLabel:*` — The destination time in seconds (or frame if the timeline is frames-based) or label to which the timeline should play. For example, `myTimeline.tweenTo(5)` would play from wherever the timeline is currently to the 5-second point whereas `myTimeline.tweenTo("myLabel")` would play to wherever "myLabel" is on the timeline.
| `vars:Object` (default = `null`)`` — An optional vars object that will be passed to the TweenLite instance. This allows you to define an onComplete, ease, delay, or any other TweenLite special property.

Returns

| `TweenLite` — A TweenLite instance that handles tweening the timeline to the desired time/label.

See also

tweenFromTo()
seek()

yoyo | () | method |

`public function yoyo(value:Boolean = false):*`

Gets or sets the timeline's `yoyo` state, where `true` causes the timeline to go back and forth, alternating backward and forward on each `repeat`. `yoyo` works in conjunction with `repeat`, where `repeat` controls how many times the timeline repeats, and `yoyo` controls whether or not each repeat alternates direction. So in order to make a timeline yoyo, you must set its `repeat` to a non-zero value. Yoyo-ing, has no affect on the timeline's "`reversed`" property. For example, if `repeat` is 2 and `yoyo` is `false`, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if `yoyo` is `true`, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.

You can set the `yoyo` property initially by passing `yoyo:true` in the `vars` parameter, like: `new TimelineMax({repeat:1, yoyo:true});`

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 `myTimeline.yoyo(true).repeat(3).timeScale(2).play(0.5);`

    var yoyo = myTimeline.yoyo(); //gets current yoyo state
    myTimeline.yoyo( true ); //sets yoyo to true

Parameters

| `value:Boolean` (default = `false`)`` — 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

repeat()
repeatDelay()
Examples
Sample code:

    //create the timeline that repeats 3 times with 1 second between each repeat and then calls myFunction() when it completes
    var tl = new TimelineMax({repeat:3, repeatDelay:1, 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 TimelineMax inside your timeline...
    var nested = new TimelineMax();
    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