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.

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

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

See also

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

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

See also

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

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

See also

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

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

See also

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

See also

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

Parameters

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

Parameters

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

Parameters

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

See also

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

See also

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.

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

See also

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

Parameters

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

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

See also

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

See also

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

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

See also

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

See also

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

See also

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

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

See also

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

See also

[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).

//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.