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"]});
• 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 add() 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 add() 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 add() 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"]});
• 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"]});
• 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"]});
• 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 tween, timeline, callback, or label (or an array of them) to the timeline.

The position parameter gives you complete control over the insertion point. By default, it's at the end of the timeline. Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the object 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the object inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the object 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient.

//add a tween to the end of the timeline
tl.add( TweenLite.to(mc, 2, {x:100}) );
//add a callback at 1.5 seconds
tl.add(func, 1.5); 
//add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
tl.add("myLabel", "+=2");
//add another timeline at "myLabel"
tl.add(otherTimeline, "myLabel"); 
//add an array of tweens 2 seconds after "myLabel"
tl.add([tween1, tween2, tween3], "myLabel+=2"); 
//add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);

Parameters

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 add(myTween, "myLabel") or reverse("myLabel"). You could also use the add() method to insert a label.

Parameters

Inserts a special callback that pauses playback of the timeline at a particular time or label. This method is more accurate than using a simple callback of your own because it ensures that even if the virtual playhead had moved slightly beyond the pause position, it'll get moved back to precisely the correct position.

Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again.

//insert a pause at exactly 2 seconds into the timeline
timeline.addPause(2);
 
//insert a pause at "yourLabel"
timeline.addPause("yourLabel");
 
//insert a pause 3 seconds after "yourLabel" and when that pause occurs, call yourFunction
timeline.addPause("yourLabel+=3", yourFunction);
 
//insert a pause at exactly 4 seconds and then call yourFunction and pass it 2 parameters, "param1" and "param2"
timeline.addPause(4, yourFunction, ["param1", "param2"]);

The special callback is just a zero-duration tween that utilizes an onComplete, so technically this callback is just like any other, and it is considered a child of the timeline.

Parameters

See also

Adds a callback to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.delayedCall(...) ) but with less code. In other words, the following two lines produce identical results:

myTimeline.add( 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 3rd parameter is the position which controls the placement of the tween in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween which can be quite convenient.

tl.call(func, ["param1"]);  //appends to the end of the timeline
tl.call(func, ["param1"], 2);  //appends it at exactly 2 seconds into the timeline (absolute position)
tl.call(func, ["param1"], "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.call(func, ["param1"], "myLabel");  //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.call(func, ["param1"], "myLabel+=2");  //places it 2 seconds after "myLabel"

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 the 3rd parameter is scope, but that parameter is omitted in the AS3 version.

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. duration() is identical to totalDuration() except for TimelineMax instances that have a non-zero repeat in which case totalDuration includes repeats and repeatDelays whereas duration doesn't. 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, but the duration value itself will remain unchanged. 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

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

myTimeline.add( 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 position parameter. Or use a regular add() like myTimeline.add( TweenLite.from(mc, 1, {x:100}), 2.75).

The 4th parameter is the position which controls the placement of the tween in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient.

tl.from(mc, 1, {x:100});  //appends to the end of the timeline
tl.from(mc, 1, {x:100}, 2);  //appends it at exactly 2 seconds into the timeline (absolute position)
tl.from(mc, 1, {x:100}, "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.from(mc, 1, {x:100}, "myLabel");  //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.from(mc, 1, {x:100}, "myLabel+=2");  //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

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

myTimeline.add( 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 position parameter. Or use a regular add() like myTimeline.add( TweenLite.fromTo(mc, 1, {x:0}, {x:100}), 2.75).

The 4th parameter is the position which controls the placement of the tween in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient.

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 at exactly 2 seconds into the timeline (absolute position)
tl.fromTo(mc, 1, {x:0}, {x:100}, "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.fromTo(mc, 1, {x:0}, {x:100}, "myLabel");  //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.fromTo(mc, 1, {x:0}, {x:100}, "myLabel+=2");  //places it 2 seconds after "myLabel"

NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passing immediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tweens actually begin.

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

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.

Removes a tween, timeline, callback, or label (or array of them) 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

Adds a zero-duration tween to the end of the timeline (or elsewhere using the "position" parameter) 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 add( TweenLite.to(target, 0, {...}) ) but with less code. In other words, the following two lines produce identical results:

myTimeline.add( TweenLite.to(mc, 0, {x:100, alpha:0.5, immediateRender:false}) );
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 position which controls the placement of the tween in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient.

tl.set(mc, {x:100});  //appends to the end of the timeline
tl.set(mc, {x:100}, 2);  //appends it at exactly 2 seconds into the timeline (absolute position)
tl.set(mc, {x:100}, "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.set(mc, {x:100}, "myLabel");  //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.set(mc, {x:100}, "myLabel+=2");  //places it 2 seconds after "myLabel"

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 6th parameter).

The 5th parameter is the position which controls the placement of the tweens in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the first tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the first tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the first tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tweens there which can be quite convenient.

tl.staggerFrom(myArray, 1, {x:100}, 0.25);  //appends to the end of the timeline
tl.staggerFrom(myArray, 1, {x:100}, 0.25, 2);  //appends at exactly 2 seconds into the timeline (absolute position)
tl.staggerFrom(myArray, 1, {x:100}, 0.25, "+=2");  //appends 2 seconds after the end (with a gap of 2 seconds)
tl.staggerFrom(myArray, 1, {x:100}, 0.25, "myLabel");  //places at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tweens are inserted there)
tl.staggerFrom(myArray, 1, {x:100}, 0.25, "myLabel+=2");  //places 2 seconds after "myLabel"

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 an extra (8th) parameter for onCompleteAllScope.

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 7th parameter).

The 6th parameter is the position which controls the placement of the tweens in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the first tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the first tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the first tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tweens there which can be quite convenient.

tl.staggerFromTo(myArray, 1, {x:0}, {x:100}, 0.25);  //appends to the end of the timeline
tl.staggerFromTo(myArray, 1, {x:0}, {x:100}, 0.25, 2);  //appends at exactly 2 seconds into the timeline (absolute position)
tl.staggerFromTo(myArray, 1, {x:0}, {x:100}, 0.25, "+=2");  //appends 2 seconds after the end (with a gap of 2 seconds)
tl.staggerFromTo(myArray, 1, {x:0}, {x:100}, 0.25, "myLabel");  //places at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tweens are inserted there)
tl.staggerFromTo(myArray, 1, {x:0}, {x:100}, 0.25, "myLabel+=2");  //places 2 seconds after "myLabel"

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

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:Cubic.easeIn}, 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 6th parameter).

The 5th parameter is the position which controls the placement of the tweens in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the first tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the first tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the first tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tweens there which can be quite convenient.

tl.staggerTo(myArray, 1, {x:100}, 0.25);  //appends to the end of the timeline
tl.staggerTo(myArray, 1, {x:100}, 0.25, 2);  //appends at exactly 2 seconds into the timeline (absolute position)
tl.staggerTo(myArray, 1, {x:100}, 0.25, "+=2");  //appends 2 seconds after the end (with a gap of 2 seconds)
tl.staggerTo(myArray, 1, {x:100}, 0.25, "myLabel");  //places at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tweens are inserted there)
tl.staggerTo(myArray, 1, {x:100}, 0.25, "myLabel+=2");  //places 2 seconds after "myLabel"

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 (8th) 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)

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

myTimeline.add( 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 position parameter. Or use a regular add() like myTimeline.add( TweenLite.to(mc, 1, {x:100}), 2.75).

The 4th parameter is the position which controls the placement of the tween in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween which can be quite convenient.

tl.to(mc, 1, {x:100});  //appends to the end of the timeline
tl.to(mc, 1, {x:100}, 2);  //appends it at exactly 2 seconds into the timeline (absolute position)
tl.to(mc, 1, {x:100}, "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.to(mc, 1, {x:100}, "myLabel");  //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.to(mc, 1, {x:100}, "myLabel+=2");  //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).