A place to store any data you want (initially populated with vars.data if it exists).

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). Add as many listeners as you want. The basic syntax is the same for all versions (AS2, AS3, and JavaScript):

Basic example (AS2, AS3, and JavaScript):

//add listener
Animation.ticker.addEventListener("tick", myFunction);
function myFunction(event) {
    //executes on every tick after the core engine updates
}
//to remove the listener later...
Animation.ticker.removeEventListener("tick", myFunction);

Due to differences in the core languages (and to maximize efficiency), the advanced syntax is slightly different for the AS3 version compared to AS2 and JavaScript. The parameters beyond the first 2 in the addEventListener() method are outlined below:

JavaScript and AS2

addEventListener(type, callback, scope, useParam, priority)

Parameters:

1. type : String - type of listener, should always be "tick"
2. callback : Function - the function to call when the event occurs
3. scope : Object - binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in JavaScript and AS2 because scope isn't generally maintained.
4. useParam : Boolean - if true, an event object will be generated and fed to the callback each time the event occurs. The event is a generic object and has two properties: type (always "tick") and target which refers to the ticker instance. The default for useParam is false because it improves performance.
5. priority : Integer - influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

In JavaScript, the Animation object/class is located at com.greensock.core.Animation - it is not added to the global namespace in order to avoid polluting it (developers rarely directly access the Animation class)

Advanced example (JavaScript and AS2):

//add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1...
Animation.ticker.addEventListener("tick", myFunction, this, true, 1);
function myFunction(event) {
    //executes on every tick after the core engine updates
}
//to remove the listener later...
Animation.ticker.removeEventListener("tick", myFunction);

AS3

The AS3 version uses the standard EventDispatcher.addEventListener() syntax which basically allows you to define a priority and whether or not to use weak references (see Adobe's docs for details).

Advanced example [AS3 only]:

import flash.events.Event;
//add listener with weak reference (standard syntax - notice the 5th parameter is true)
Animation.ticker.addEventListener("tick", myFunction, false, 0, true);
function myFunction(event:Event):void {
    //executes on every tick after the core engine updates
}
//to remove the listener later...
Animation.ticker.removeEventListener("tick", myFunction);

[Read-only] Parent timeline. Every animation is placed onto a timeline (the root timeline by default) and can only have one parent. An instance cannot exist in multiple timelines at once.

The vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc. as well as tweening properties like opacity, x, y or whatever.

Constructor

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. A tween's starting values are not recorded until after the delay has expired (except in from() tweens which render immediately by default unless immediateRender:false is set in the vars parameter). An animation's delay is unaffected by its timeScale, so if you were to change timeScale from 1 to 10, for example, it wouldn't cause the delay to grow tenfold.

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.delay(2).timeScale(0.5).play(1);

 var currentDelay = myAnimation.delay(); //gets current delay
 myAnimation.delay(2); //sets delay

Parameters

Gets or sets the animation's duration, not including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax). For example, if a TweenMax 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).

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).delay(0.5).play(1);

 var currentDuration = myAnimation.duration(); //gets current duration
 myAnimation.duration(2); //sets duration

Parameters

See also

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. This is the same as defining the values directly in the constructor's vars parameter initially, so the following two lines are functionally equivalent:

//the following two lines produce IDENTICAL results:
var myAnimation = new TweenLite(mc, 1, {x:100, onComplete:myFunction, onCompleteParams:["param1","param2"]});
myAnimation.eventCallback("onComplete", myFunction, ["param1","param2"]);

The benefit of using eventCallback() is that it allows you to set callbacks even after the animation instance has been created and it also allows you to inspect the callback references or even delete them on-the-fly (use null to delete the event callback).

//deletes the onUpdate
myAnimation.eventCallback("onUpdate", null);

IMPORTANT:Animation instances can only have one callback associated with each event type (one onComplete, one onUpdate, one onStart, etc.). So setting a new value will overwrite the old one. All of the values populate the vars object too which was originally passed into the constructor (think of that like a storage place for configuration data).

This method serves as both a getter and setter. Omitting all but the first parameter returns the current value (getter), whereas defining more than the first parameter sets the value (setter) and returns the instance itself for easier chaining, like myAnimation.eventCallback("onComplete", completeHandler).eventCallback("onUpdate", updateHandler, ["param1","{self}"]).play(1);

var currentOnComplete = myAnimation.eventCallback("onComplete"); //gets current onComplete
myAnimation.eventCallback("onComplete", myFunction); //sets the onComplete

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 (4th) parameter for scope.

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.

Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines). So for example, if a tween is in the middle of tweening, it's active, but after it is finished (or before it begins), it is not active. If it is paused or if it is placed inside of a timeline that's paused (or if any of its ancestor timelines are paused), isActive() will return false. If the playhead is directly on top of the animation's start time (even if it hasn't rendered quite yet), that counts as "active".

You may also check the progress() or totalProgress(), but those don't take into consideration the paused state or the position of the parent timeline's playhead.

See also

Kills the animation entirely or in part depending on the parameters. Simply calling kill() (omitting the parameters) will immediately stop the animation and release it for garbage collection. To kill only particular tweening properties of the animation, use the first parameter which should be a generic object with enumerable properties corresponding to those that should be killed, like {x:true, y:true}. The second parameter allows you to define a target (or array of targets) to affect.

Note: the values assigned to each property of the vars parameter object don't matter - the sole purpose of the object is for iteration over the named properties. In other words, {x:true, y:true} would produce the same results as {x:false, y:false}.

 //kill the entire animation:
 myAnimation.kill();
 
 //kill only the "x" and "y" properties of the animation (all targets):
 myAnimation.kill({x:true, y:true});
 
 //kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
 myAnimation.kill(null, myObject);
 
 //kill only the "x" and "y" properties of animations of the target "myObject":
 myAnimation.kill({x:true, y:true}, myObject);
  
 //kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
 myAnimation.kill({opacity:true}, [myObject1, myObject2]);
         

Parameters

Pauses the instance, optionally jumping to a specific time.

If you define a time to jump to (the first parameter, which could also be a label for TimelineLite or TimelineMax instances), the playhead moves there immediately and 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.

 //pauses wherever the playhead currently is:
 myAnimation.pause();
 
 //jumps to exactly 2-seconds into the animation and then pauses:
 myAnimation.pause(2);
 
 //jumps to exactly 2-seconds into the animation and pauses but doesn't suppress events during the initial move:
 myAnimation.pause(2, false);
 

Parameters

Gets or sets the animation's paused state which indicates whether or not the animation is currently paused. This does not take into account anscestor timelines. So for example, a tween that is not paused might appear paused if its parent timeline (or any ancenstor timeline) is paused. Pausing an animation doesn't remove it from its parent timeline, but it does cause it not to be factored into the parent timeline's duration/totalDuration. When an animation completes, it does NOT alter its paused state.

In most cases, it is easiest to use the pause() method to pause the animation, and resume() to resume it. But to check the current state, you must use the paused() method. It can also be useful for toggling like myAnimation.paused( !myAnimation.paused() );

You can set the paused state initially by passing paused:true in the vars parameter.

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.paused(true).delay(2).timeScale(0.5);

 var paused = myAnimation.paused(); //gets current paused state
 myAnimation.paused( true ); //sets paused state to true (just like pause())
 myAnimation.paused( !myAnimation.paused() ); //toggles the paused state
         

Parameters

See also

Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). This also ensures that the instance is neither paused nor reversed.

If you define a "from" time (the first parameter, which could also be a label for TimelineLite or TimelineMax instances), the playhead moves there immediately and 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.

//begins playing from wherever the playhead currently is:
myAnimation.play();
//begins playing from exactly 2-seconds into the animation:
myAnimation.play(2);
//begins playing from exactly 2-seconds into the animation but doesn't suppress events during the initial move:
myAnimation.play(2, false);

Parameters

Gets or sets the animations'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 at the halfway point, and 1 is at the end (complete). If the animation has a non-zero repeat defined (only available in TweenMax and TimelineMax), progress() and totalProgress() will be different because progress() doesn't include the repeat or repeatDelay 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 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

Restarts and begins playing forward from the beginning.

 //restarts, not including any delay that was defined
 myAnimation.restart();
 
 //restarts, including any delay, and doesn't suppress events during the initial move back to time:0
 myAnimation.restart(true, false);
         

Parameters

Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.

If you define a time to jump to (the first parameter, which could also be a label for TimelineLite or TimelineMax instances), the playhead moves there immediately and 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.

 //resumes from wherever the playhead currently is:
 myAnimation.resume();
 
 //jumps to exactly 2-seconds into the animation and then resumes playback:
 myAnimation.resume(2);
 
 //jumps to exactly 2-seconds into the animation and resumes playbck but doesn't suppress events during the initial move:
 myAnimation.resume(2, false);
         

Parameters

Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease. This will cause the instance's time and totalTime to move back towards zero as well. You can optionally define a specific time to jump to before reversing (by default it begins playing in reverse from wherever the playhead currently is). Calling reverse() also ensures that the instance is neither paused nor reversed.

To jump to the very end of the animation and play in reverse from there, use 0 as the "from" parameter, like reverse(0).

To check whether or not the instance is reversed, use the reversed() method, like if (myAnimation.reversed()) {...}

If you define a "from" time (the first parameter, which could also be a label for TimelineLite or TimelineMax instances), the playhead moves there immediately and 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.

 //reverses playback from wherever the playhead currently is:
 myAnimation.reverse();
 
 //reverses playback from exactly 2 seconds into the animation:
 myAnimation.reverse(2);
 
 //reverses playback from exactly 2 seconds into the animation but doesn't suppress events during the initial move:
 myAnimation.reverse(2, false);
 
 //reverses playback from the very END of the animation:
 myAnimation.reverse(0);
  
 //reverses playback starting from exactly 1 second before the end of the animation:
 myAnimation.reverse(-1);
 
 //flips the orientation (if it's forward, it will go backward, if it is backward, it will go forward):
 if (myAnimation.reversed()) {
     myAnimation.play();
 } else {
     myAnimation.reverse();
 }
 
 //flips the orientation using the reversed() method instead (shorter version of the code above):
 myAnimation.reversed( !myAnimation.reversed() );
         

Parameters

Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards. This value is not affected by yoyo repeats (TweenMax and TimelineMax only) and it does not take into account the reversed state of anscestor timelines. So for example, a tween that is not reversed might appear reversed if its parent timeline (or any ancenstor timeline) is reversed.

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 rev = myAnimation.reversed(); //gets current orientation
myAnimation.reversed( true ); //sets the orientation to reversed
myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation

Parameters

See also

Jumps to a specific time 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);
         

Parameters

Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined). For example, if a tween starts at exactly 3 seconds into the timeline on which it is placed, the tween's startTime would be 3.

The startTime may be automatically adjusted to make the timing appear seamless if the parent timeline's smoothChildTiming property is true and a timing-dependent change is made on-the-fly, like reverse() is called or timeScale() is changed, etc. See the documentation for the smoothChildTiming property of timelines for more details.

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 start = myAnimation.startTime(); //gets current start time
myAnimation.startTime(2); //sets the start time

Parameters

Gets or sets the local position of the playhead (essentially the current time), described in seconds (or frames for frames-based animations) which will never be less than 0 or greater than the animation's duration. For example, if the duration is 10 and you were to watch the time during the course of the animation, you'd see it go from 0 at the beginning to 10 at the end. Setting time to 5 would cause the animation to jump to its midway point (because it's half of the duration).

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 = myAnimation.time(); //gets current time
myAnimation.time(2); //sets time, jumping to new value just like seek().

Parameters

See also

Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc. For example, if an animation's duration is 2 but its timeScale is 0.5, it will take 4 seconds to finish. If you nest that animation in a timeline whose timeScale is 0.5 as well, it would take 8 seconds to finish. You can even tween the timeScale to gradually slow it down or speed it up.

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.timeScale(2).play(1);

var currentTimeScale = myAnimation.timeScale(); //gets current timeScale
myAnimation.timeScale( 0.5 ); //sets timeScale to half-speed

Parameters

See also

Gets or sets the animation's total duration including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax). For example, if a TweenMax 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).

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).delay(0.5).play(1);

 var ctd = myAnimation.totalDuration(); //gets current total duration
 myAnimation.totalDuration(2); //sets total duration
         

Parameters

See also

Gets or sets the animation's total progress 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 at the halfway point, and 1 is at the end (complete). If the animation has a non-zero repeat defined (only available in TweenMax and TimelineMax), progress() and totalProgress() will be different because progress() doesn't include the repeat or repeatDelay 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 myAnimation.totalProgress(0.5).play();

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

Parameters

See also

Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax). For example, if a TweenMax instance has a duration of 2 and a repeat of 3, totalTime will go from 0 to 8 during the course of the tween (plays once then repeats 3 times, making 4 total cycles) whereas time will go from 0 to 2 a total of 4 times. If you added a repeatDelay of 1, that would make the totalTime go from 0 to 11 over the course of the tween.

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.

totalTime will never exceed the totalDuration, nor will it be less than 0 (values will be clipped appropriately). Negative values will be interpreted from the END of the animation. For example, -2 would be 2 seconds before the end. If the animation's totalDuration is 6 and you do myAnimation.totalTime(-2), it will jump to a totalTime of 4.

 var tt = myAnimation.totalTime(); //gets total time
 myAnimation.totalTime(2); //sets total time, jumping to new value just like seek().
         

Parameters

See also