Packagecom.greensock
Classpublic class TweenMax
InheritanceTweenMax Inheritance TweenLite Inheritance Animation Inheritance Object
Implements flash.events.IEventDispatcher

TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), AS3 event dispatching, updateTo(), pauseAll(), and more. It also activates many extra plugins by default, making it extremely full-featured. Any of the plugins can work with TweenLite too, but TweenMax saves you the step of activating the common ones. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. The syntax is identical. You can mix and match TweenLite and TweenMax in your project as you please, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.

Like TweenLite, a TweenMax instance handles tweening one or more properties of any object (or array of objects) over time. TweenMax can be used on its own or in conjuction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler. With scores of other animation frameworks to choose from, why consider the GreenSock Animation Platform?:

USAGE

The most common type of tween is a to() tween which allows you to define the destination values:

TweenMax.to(myObject, 2, {x:100, y:200});

The above code will tween myObject.x from whatever it currently is to 100 and myObject.y property to 200 over the course of 2 seconds. Notice the x and y values are defined inside a generic object (between curly braces). Put as many properties there as you want.

By default, tweens begin immediately, although you can delay them using the delay special property or pause them initially using the paused special property (see below).

The target can also be an array of objects. For example, the following tween will tween the alpha property to 0.5 and y property to 100 for obj1, obj2, and obj3:

TweenMax.to([obj1, obj2, obj3], 1, {alpha:0.5, y:100});

You can also use a from() tween if you want to define the starting values instead of the ending values so that the target tweens from the defined values to wherever they currently are. Or a fromTo() lets you define both starting and ending values.

Although the to(), from(), and fromTo() static methods are popular because they're quick and can avoid some garbage collection hassles, you can also use the more object-oriented syntax like this:

var tween = new TweenMax(myObject, 2, {x:100, y:200});

or even:

var tween = TweenMax.to(myObject, 2, {x:100, y:200});

SPECIAL PROPERTIES:

Typically the vars parameter is used to define ending values for tweening properties of the target (or beginning values for from() tweens) like {x:100, y:200, alpha:0}, but the following optional special properties serve other purposes:

AS3 note: In AS3, using a TweenMaxVars instance instead of a generic object to define your vars is a bit more verbose but provides code hinting and improved debugging because it enforces strict data typing. Use whichever one you prefer.

PLUGINS:

Think of plugins like special properties that are dynamically added, delivering extra abilities without forcing them to be baked into the core engine, keeping it relatively lean and mean. Each plugin is associated with a property name and it takes responsibility for handling that property. For example, the TintPlugin is associated with the "tint" property name so if it is activated it will intercept the "tint" property in the following tween and manage it uniquely:

TweenLite.to(mc, 1, {tint:0xFF0000});

If the TintPlugin wasn't activated, TweenLite would act as though you were trying to literally tween the mc.tint property (and there is no such thing).

In the JavaScript version of TweenMax, activating a plugin is as simple as loading the associated .js file. No extra activation code is necessary. And by default, the JavaScript version of TweenMax includes the CSSPlugin and RoundPropsPlugin so you don't need to load those separately. In the ActionScript version, activating a plugin requires a single line of code and you only need to do it once, so it's pretty easy. Simply pass an Array containing the names of all the plugins you'd like to activate to the TweenPlugin.activate() method, like this:

TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]);

To make it even easier, there is a Plugin Explorer which writes the code for you. All you need to do is select the plugins and copy/paste the code from the bottom of the tool. It also displays interactive examples of each plugin and the assocaited code so that it’s easy to see the correct syntax.

The following plugins are automatically activated by TweenMax:

EXAMPLES:

Please see http://www.greensock.com for examples, tutorials, and interactive demos.

NOTES / TIPS:

Copyright 2008-2013, 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.



Public Properties
 PropertyDefined By
 Inheriteddata : *
A place to store any data you want (initially populated with vars.data if it exists).
Animation
 InheriteddefaultEase : Ease
[static] Provides An easy way to change the default easing equation.
TweenLite
 InheriteddefaultOverwrite : String = auto
[static] Provides An easy way to change the default overwrite mode.
TweenLite
 Inheritedtarget : Object
[READ-ONLY] Target object (or array of objects) whose properties the tween affects.
TweenLite
  ticker : Shape
[static] The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers).
TweenMax
 Inheritedtimeline : SimpleTimeline
[Read-only] Parent timeline.
Animation
 Inheritedvars : Object
The vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.
Animation
Public Methods
 MethodDefined By
  
TweenMax(target:Object, duration:Number, vars:Object)
Constructor
TweenMax
  
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
[AS3 only] Registers a function that should be called each time a particular type of event occurs, like "complete" or "update".
TweenMax
 Inherited
delay(value:Number):*
Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin.
Animation
  
delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenMax
[static] Provides a simple way to call a function after a set amount of time (or frames).
TweenMax
  
duration(value:Number):*
[override] Gets or sets the animation's duration, not including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).
TweenMax
 Inherited
eventCallback(type:String, callback:Function = null, params:Array = null):*
Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.
Animation
  
from(target:Object, duration:Number, vars:Object):TweenMax
[static] Static method for creating a TweenMax instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
TweenMax
  
fromTo(target:Object, duration:Number, fromVars:Object, toVars:Object):TweenMax
[static] Static method for creating a TweenMax instance that allows you to define both the starting and ending values (as opposed to to() and from() tweens which are based on the target's current values at one end or the other).
TweenMax
  
getAllTweens(includeTimelines:Boolean = false):Array
[static] Returns an array containing all tweens (and optionally timelines too, excluding the root timelines).
TweenMax
  
getTweensOf(target:*, onlyActive:Boolean = false):Array
[static] Returns an array containing all the tweens of a particular target (or group of targets) that have not been released for garbage collection yet which typically happens within a few seconds after the tween completes.
TweenMax
  
[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.
TweenMax
 Inherited
isActive():Boolean
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).
Animation
  
isTweening(target:Object):Boolean
[static] Reports whether or not a particular object is actively tweening.
TweenMax
 Inherited
kill(vars:Object = null, target:Object = null):*
Kills the animation entirely or in part depending on the parameters.
Animation
  
killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void
[static] Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.
TweenMax
  
killChildTweensOf(parent:DisplayObjectContainer, complete:Boolean = false):void
[static] [AS3/AS2 only] Kills all tweens of the children of a particular MovieClip/DisplayObjectContainer, optionally forcing them to completion first.
TweenMax
  
killDelayedCallsTo(func:Function):void
[static] Immediately kills all of the delayedCalls to a particular function.
TweenMax
  
killTweensOf(target:*, onlyActive:* = false, vars:Object = null):void
[static] Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.
TweenMax
 Inherited
pause(atTime:* = null, suppressEvents:Boolean = true):*
Pauses the instance, optionally jumping to a specific time.
Animation
  
pauseAll(tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void
[static] [deprecated] Pauses all tweens and/or delayedCalls/callbacks and/or timelines.
TweenMax
 Inherited
paused(value:Boolean = false):*
Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.
Animation
 Inherited
play(from:* = null, suppressEvents:Boolean = true):*
Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).
Animation
  
progress(value:Number, suppressEvents:Boolean = false):*
[override] Gets or sets the tween's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.
TweenMax
  
removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void
[AS3 only] Removes a listener from the EventDispatcher object.
TweenMax
  
repeat(value:int = 0):*
Gets or sets the number of times that the tween should repeat after its first iteration.
TweenMax
  
repeatDelay(value:Number):*
Gets or sets the amount of time in seconds (or frames for frames-based tweens) between repeats.
TweenMax
 Inherited
restart(includeDelay:Boolean = false, suppressEvents:Boolean = true):*
Restarts and begins playing forward from the beginning.
Animation
 Inherited
resume(from:* = null, suppressEvents:Boolean = true):*
Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.
Animation
  
resumeAll(tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void
[static] [deprecated] Resumes all paused tweens and/or delayedCalls/callbacks and/or timelines.
TweenMax
 Inherited
reverse(from:* = null, suppressEvents:Boolean = true):*
Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.
Animation
 Inherited
reversed(value:Boolean = false):*
Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.
Animation
 Inherited
seek(time:*, suppressEvents:Boolean = true):*
Jumps to a specific time without affecting whether or not the instance is paused or reversed.
Animation
  
set(target:Object, vars:Object):TweenMax
[static] Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.
TweenMax
  
staggerFrom(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array
[static] 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.
TweenMax
  
staggerFromTo(targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array
[static] 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.
TweenMax
  
staggerTo(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array
[static] 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.
TweenMax
 Inherited
startTime(value:Number):*
Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).
Animation
  
time(value:Number, suppressEvents:Boolean = false):*
[override] Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays.
TweenMax
 Inherited
timeScale(value:Number):*
Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.
Animation
  
to(target:Object, duration:Number, vars:Object):TweenMax
[static] Static method for creating a TweenMax instance that animates to the specified destination values (from the current values).
TweenMax
  
totalDuration(value:Number):*
[override] Gets or sets the total duration of the tween in seconds (or frames for frames-based tweens) including any repeats or repeatDelays.
TweenMax
  
totalProgress(value:Number, suppressEvents:Boolean = false):*
[override] Gets or sets the tween's totalProgress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.
TweenMax
 Inherited
totalTime(time:Number, suppressEvents:Boolean = false, uncapped:Boolean = false):*
Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).
Animation
  
updateTo(vars:Object, resetDuration:Boolean = false):*
Updates tweening values on the fly so that they appear to seamlessly change course even if the tween is in-progress.
TweenMax
  
yoyo(value:Boolean = false):*
Gets or sets the tween's yoyo state, where true causes the tween to go back and forth, alternating backward and forward on each repeat.
TweenMax
Property Detail
tickerproperty
public static var ticker:Shape

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
 TweenMax.ticker.addEventListener("tick", myFunction);
 
 function myFunction(event) {
     //executes on every tick after the core engine updates
 }
         
 //to remove the listener later...
 TweenMax.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.

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...
 TweenMax.ticker.addEventListener("tick", myFunction, this, true, 1);
 
 function myFunction(event) {
     //executes on every tick after the core engine updates
 }
 
 //to remove the listener later...
 TweenMax.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)
 TweenMax.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...
 TweenMax.ticker.removeEventListener("tick", myFunction);
         

Constructor Detail
TweenMax()Constructor
public function TweenMax(target:Object, duration:Number, vars:Object)

Constructor

Parameters
target:Object — Target object (or array of objects) whose properties this tween affects
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: new TweenMax(mc, 1, {x:100, y:200, onComplete:myFunction}).
Method Detail
addEventListener()method
public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

[AS3 only] Registers a function that should be called each time a particular type of event occurs, like "complete" or "update". The function will be passed a single "event" parameter whose "target" property refers to the tween. Typically it is more efficient to use callbacks like onComplete, onUpdate, onStart, onReverseComplete, and onRepeat unless you need the event parameter or if you need to register more than one listener for the same type of event.

If you no longer need an event listener, remove it by calling removeEventListener(), or memory problems could result. Event listeners are not automatically removed from memory because the garbage collector does not remove the listener as long as the dispatching object exists (unless the useWeakReference parameter is set to true).

Parameters

type:String — The type of event
 
listener:Function — The listener function that processes the event. This function must accept an Event object as its only parameter
 
useCapture:Boolean (default = false) — (not typically used) Determines whether the listener works in the capture phase or the target and bubbling phases. If useCapture is set to true, the listener processes the event only during the capture phase and not in the target or bubbling phase. If useCapture is false, the listener processes the event only during the target or bubbling phase. To listen for the event in all three phases, call addEventListener twice, once with useCapture set to true, then again with useCapture set to false.
 
priority:int (default = 0) — The priority level of the event listener. The priority is designated by a signed 32-bit integer. The higher the number, the higher the priority. All listeners with priority n are processed before listeners of priority n-1. If two or more listeners share the same priority, they are processed in the order in which they were added. The default priority is 0.
 
useWeakReference:Boolean (default = false) — Determines whether the reference to the listener is strong or weak. A strong reference (the default) prevents your listener from being garbage-collected. A weak reference does not.

See also

delayedCall()method 
public static function delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenMax

Provides a simple way to call a function after a set amount of time (or frames). You can optionally pass any number of parameters to the function too.

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 4th parameter is scope, bumping useFrames back to the 5th parameter:

TweenMax.delayedCall(delay, callback, params, scope, useFrames) [JavaScript and AS2 only]

//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", 2]);
         
function myFunction(param1, param2) {
    //do stuff
}

Parameters

delay:Number — Delay in seconds (or frames if useFrames is true) before the function should be called
 
callback:Function — Function to call
 
params:Array (default = null) — An Array of parameters to pass the function (optional).
 
useFrames:Boolean (default = false) — If the delay should be measured in frames instead of seconds, set useFrames to true (default is false)

Returns
TweenMax — TweenMax instance
duration()method 
override public function duration(value:Number):*

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

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

Returns
* — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
from()method 
public static function from(target:Object, duration:Number, vars:Object):TweenMax

Static method for creating a TweenMax instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.

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 (often the desired behavior when inserting into TimelineLite or TimelineMax instances). To illustrate the default behavior, the following code will immediately set the alpha of mc to 0 and then wait 2 seconds before tweening the alpha back to 1 over the course of 1.5 seconds:

TweenMax.from(mc, 1.5, {alpha:0, delay:2});

Since the target parameter can also be an array of objects, the following code will tween the alpha property of mc1, mc2, and mc3 from a value of 0 simultaneously:

TweenMax.from([mc1, mc2, mc3], 1.5, {alpha:0});

Even though 3 objects are animating, there is still only one tween that is created. In order to stagger or offset the start times of each object animating, please see the staggerFrom() method (TimelineLite has one too).

For simple sequencing, you can use the delay special property (like TweenMax.from(mc, 1, {alpha:0, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical from() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.

Parameters

target:Object — Target object (or array of objects) whose properties this tween affects.
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
vars:Object — An object defining the starting value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x from 100 and mc.y from 200 and then call myFunction, do this: TweenMax.from(mc, 1, {x:100, y:200, onComplete:myFunction});

Returns
TweenMax — TweenMax instance

See also

fromTo()method 
public static function fromTo(target:Object, duration:Number, fromVars:Object, toVars:Object):TweenMax

Static method for creating a TweenMax instance that allows you to define both the starting and ending values (as opposed to to() and from() tweens which are based on the target's current values at one end or the other).

NOTE: Only put starting values in the fromVars parameter - all special properties for the tween (like onComplete, onUpdate, delay, etc.) belong in the toVars parameter.

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 tween actually begins (often the desired behavior when inserting into TimelineLite or TimelineMax instances).

Since the target parameter can also be an array of objects, the following code will tween the x property of mc1, mc2, and mc3 from 0 to 100 simultaneously:

TweenMax.fromTo([mc1, mc2, mc3], 1, {x:0}, {x:100});

Even though 3 objects are animating, there is still only one tween created. In order to stagger or offset the start times of each object animating, please see the staggerFromTo() method (TimelineLite has one too).

For simple sequencing, you can use the delay special property (like TweenMax.fromTo(mc, 1, {x:0}, {x:100, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical fromTo() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.

Parameters

target:Object — Target object (or array of objects) whose properties this tween affects.
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
fromVars:Object — An object defining the starting value for each property that should be tweened. For example, to tween mc.x from 100 and mc.y from 200, fromVars would look like this: {x:100, y:200}.
 
toVars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x from 0 to 100 and mc.y from 0 to 200 and then call myFunction, do this: TweenMax.fromTo(mc, 1, {x:0, y:0}, {x:100, y:200, onComplete:myFunction});

Returns
TweenMax — TweenMax instance

See also

getAllTweens()method 
public static function getAllTweens(includeTimelines:Boolean = false):Array

Returns an array containing all tweens (and optionally timelines too, excluding the root timelines). If your goal is to affect all of the tweens/timelines/delayedCalls (like to pause() them or reverse() or alter their timeScale), you might want to consider using the static TimelineLite.exportRoot() method instead because it provides a single instance that you can use to control everything.

Parameters

includeTimelines:Boolean (default = false) — If true, TimelineLite and TimelineMax instances will also be included.

Returns
Array — Array of tweens/timelines

See also

getTweensOf()method 
public static function getTweensOf(target:*, onlyActive:Boolean = false):Array

Returns an array containing all the tweens of a particular target (or group of targets) that have not been released for garbage collection yet which typically happens within a few seconds after the tween completes. For example, TweenMax.getTweensOf(myObject) returns an array of all tweens of myObject, even tweens that haven't begun yet. TweenMax.getTweensOf([myObject1, myObject2]); will return a condensed array of the tweens of myObject1 plus all the tweens of myObject2 combined into one array with duplicates removed.

Since the method only finds tweens that haven't been released for garbage collection, if you create a tween and then let it finish and then a while later try to find it with getTweensOf(), it may not be found because it was released by the engine for garbage collection. Remember, one of the best parts of GSAP is that it saves you from the headache of managing gc. Otherwise, you'd need to manually dispose each tween you create, making things much more cumbersome.

TweenMax.to(myObject1, 1, {x:100});
TweenMax.to(myObject2, 1, {x:100});
TweenMax.to([myObject1, myObject2], 1, {alpha:0});
         
var a1 = TweenMax.getTweensOf(myObject1); //finds 2 tweens
var a2 = TweenMax.getTweensOf([myObject1, myObject2]); //finds 3 tweens

Parameters

target:* — The target whose tweens should be returned, or an array of such targets
 
onlyActive:Boolean (default = false) — If true, only tweens that are currently active will be returned (a tween is considered "active" if the virtual playhead is actively moving across the tween and it is not paused, nor are any of its ancestor timelines paused).

Returns
Array — An array of tweens
invalidate()method 
override public function invalidate():*

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

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

Returns
* — self (makes chaining easier)
isTweening()method 
public static function isTweening(target:Object):Boolean

Reports whether or not a particular object is actively tweening. If a tween is paused, is completed, or hasn't started yet, it isn't considered active.

Parameters

target:Object — Target object whose tweens you're checking

Returns
Boolean — Boolean value indicating whether or not any active tweens were found
killAll()method 
public static function killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void

Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first. The various parameters provide a way to specify exactly which types you want to kill

//kill everything
TweenMax.killAll();
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);

Parameters

complete:Boolean (default = false) — Determines whether or not the tweens/delayedCalls/timelines should be forced to completion before being killed.
 
tweens:Boolean (default = true) — If true, all tweens will be killed (TweenLite and TweenMax instances)
 
delayedCalls:Boolean (default = true) — If true, all delayedCalls will be killed. TimelineMax callbacks are treated the same as delayedCalls.
 
timelines:Boolean (default = true) — If true, all TimelineLite and TimelineMax instances will be killed.

killChildTweensOf()method 
public static function killChildTweensOf(parent:DisplayObjectContainer, complete:Boolean = false):void

[AS3/AS2 only] Kills all tweens of the children of a particular MovieClip/DisplayObjectContainer, optionally forcing them to completion first.

Parameters

parent:DisplayObjectContainer — The parent MovieClip/DisplayObjectContainer whose children's tweens should be killed.
 
complete:Boolean (default = false) — If true, the tweens will be forced to completion before being killed.

killDelayedCallsTo()method 
public static function killDelayedCallsTo(func:Function):void

Immediately kills all of the delayedCalls to a particular function. If, for example, you want to kill all delayedCalls to myFunction, you'd do this:

TweenMax.killDelayedCallsTo(myFunction);

Since a delayedCall is just a tween that uses the function/callback as both its target and its onComplete, TweenMax.killTweensOf(myFunction) produces exactly the same result as TweenMax.killDelayedCallsTo(myFunction).

This method affects all delayedCalls that were created using TweenLite.delayedCall() or TweenMax.delayedCall() or the call() or addCallback() methods of TimelineLite or TimelineMax. Basically, any tween whose target is the function you supply will be killed.

Parameters

func:Function — The function for which all delayedCalls should be killed/cancelled.

killTweensOf()method 
public static function killTweensOf(target:*, onlyActive:* = false, vars:Object = null):void

Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function. If, for example, you want to kill all tweens of myObject, you'd do this:

TweenMax.killTweensOf(myObject);

To kill only active (currently animating) tweens of myObject, you'd do this:

TweenLite.killTweensOf(myObject, true);

To kill only particular tweening properties of the object, use the second parameter. For example, if you only want to kill all the tweens of myObject.alpha and myObject.x, you'd do this:

TweenMax.killTweensOf(myObject, false, {alpha:true, x:true});

To kill all the delayedCalls (like ones created using TweenMax.delayedCall(5, myFunction);), you can simply call TweenMax.killTweensOf(myFunction); because delayedCalls are simply tweens that have their target and onComplete set to the same function (as well as a delay of course).

killTweensOf() affects tweens that haven't begun yet too. If, for example, a tween of myObject has a delay of 5 seconds and TweenLite.killTweensOf(mc) is called 2 seconds after the tween was created, it will still be killed even though it hasn't started yet.

Parameters

target:* — Object whose tweens should be killed immediately
 
onlyActive:* (default = false) — If true, only tweens that are currently active will be killed (a tween is considered "active" if the virtual playhead is actively moving across the tween and it is not paused, nor are any of its ancestor timelines paused).
 
vars:Object (default = null) — To kill only specific properties, use a generic object containing enumerable properties corresponding to the ones that should be killed like {x:true, y:true}. The values assigned to each property of the object don't matter - the sole purpose of the object is for iteration over the named properties (in this case, x and y). If no object (or null) is defined, all matched tweens will be killed in their entirety.

pauseAll()method 
public static function pauseAll(tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void

[deprecated] Pauses all tweens and/or delayedCalls/callbacks and/or timelines. This literally changes the paused state of all affected tweens/delayedCalls/timelines, but a more flexible way to globally control things is to use the TimelineLite.exportRoot() method which essentially wraps all of the tweens/timelines/delayedCalls on the root timeline into a TimelineLite instance so that you can pause(), resume(), or even reverse() or alter the timeScale without affecting animations that you create after the export. This also avoids having to alter the paused state of every individual tween/delayedCall/timeline - controlling the TimelineLite that contains the exported animations delivers the same effect visually, but does so in a more elegant and flexible way.

Parameters

tweens:Boolean (default = true) — If true, all tweens will be paused.
 
delayedCalls:Boolean (default = true) — If true, all delayedCalls will be paused. timeline callbacks are treated the same as delayedCalls.
 
timelines:Boolean (default = true) — If true, all TimelineLite and TimelineMax instances will be paused (at least the ones who haven't finished and been removed from their parent timeline)

See also

progress()method 
override public function progress(value:Number, suppressEvents:Boolean = false):*

Gets or sets the tween's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. If the tween has a non-zero repeat defined, progress and totalProgress will be different because progress doesn't include any repeats or repeatDelays whereas totalProgress does. For example, if a TweenMax 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 myTween.progress(0.5).play();

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

Parameters

value:Number (default = NaN) — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
 
suppressEvents:Boolean (default = false) — If true, no events or callbacks will be triggered when the playhead moves to the new position.

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

See also

removeEventListener()method 
public function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void

[AS3 only] Removes a listener from the EventDispatcher object. If there is no matching listener registered with the EventDispatcher object, a call to this method has no effect.

Parameters

type:String — The type of event
 
listener:Function — The listener object to remove.
 
useCapture:Boolean (default = false) — Specifies whether the listener was registered for the capture phase or the target and bubbling phases. If the listener was registered for both the capture phase and the target and bubbling phases, two calls to removeEventListener() are required to remove both, one call with useCapture() set to true, and another call with useCapture() set to false.

repeat()method 
public function repeat(value:int = 0):*

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

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

TweenMax.to(mc, 1, {x:100, repeat:2});

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining, like myTween.repeat(2).yoyo(true).play();

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

Parameters

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

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

See also

repeatDelay()method 
public function repeatDelay(value:Number):*

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

TweenMax.to(mc, 1, {x:100, repeat:2, repeatDelay:1});

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining, like myTween.repeat(2).yoyo(true).repeatDelay(0.5).play();

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

Parameters

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

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

See also

resumeAll()method 
public static function resumeAll(tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void

[deprecated] Resumes all paused tweens and/or delayedCalls/callbacks and/or timelines. This literally changes the paused state of all affected tweens/delayedCalls/timelines, but a more flexible way to globally control things is to use the TimelineLite.exportRoot() method which essentially wraps all of the tweens/timelines/delayedCalls on the root timeline into a TimelineLite instance so that you can pause(), resume(), or even reverse() or alter the timeScale without affecting animations that you create after the export. This also avoids having to alter the paused state of every individual tween/delayedCall/timeline - controlling the TimelineLite that contains the exported animations delivers the same effect visually, but does so in a more elegant and flexible way.

Parameters

tweens:Boolean (default = true) — If true, all tweens will be resumed.
 
delayedCalls:Boolean (default = true) — If true, all delayedCalls will be resumed. timeline callbacks are treated the same as delayedCalls.
 
timelines:Boolean (default = true) — If true, all TimelineLite and TimelineMax instances will be resumed (at least the ones who haven't finished and been removed from their parent timeline)

See also

set()method 
public static function set(target:Object, vars:Object):TweenMax

Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name. So the following lines produce identical results:

TweenMax.set(myObject, {x:100, y:50, alpha:0});
TweenMax.to(myObject, 0, {x:100, y:50, alpha:0});

And of course you can use an array to set the properties of multiple targets at the same time, like:

TweenMax.set([obj1, obj2, obj3], {x:100, y:50, alpha:0});
         

Parameters

target:Object — Target object (or array of objects) whose properties will be affected.
 
vars:Object — An object defining the value for each property that should be set. For example, to set mc.x to 100 and mc.y to 200, do this: TweenMax.set(mc, {x:100, y:200});

Returns
TweenMax — A TweenMax instance (with a duration of 0) which can optionally be inserted into a TimelineLite/Max instance (although it's typically more concise to just use the timeline's set() method).
staggerFrom()method 
public static function staggerFrom(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array

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];
TweenMax.staggerFrom(textFields, 1, {y:"+150"}, 0.2);

staggerFrom() simply loops through the targets array and creates a from() tween for each object and then returns an array containing all of the resulting tweens (one for each object).

If you can afford the slight increase in file size, it is usually better to use TimelineLite's staggerFrom() method because it wraps the tweens in a TimelineLite instead of an array which makes controlling the group as a whole much easier. That way you could pause(), resume(), reverse(), restart() or change the timeScale of everything at once.

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

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

Parameters

targets:Array — An array of target objects whose properties should be affected
 
duration:Number — Duration in seconds (or frames if useFrames:true is defined in the vars parameter)
 
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like ease. For example, to tween x to 100 and y to 200 for mc1, mc2, and mc3, staggering their start time by 0.25 seconds and then call myFunction when they last one has finished, do this: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25, myFunction}).
 
stagger:Number (default = 0) — Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+100", alpha:0}, 0.2).
 
onCompleteAll:Function (default = null) — A function to call as soon as the entire sequence of tweens has completed
 
onCompleteAllParams:Array (default = null) — An array of parameters to pass the onCompleteAll method.

Returns
Array — An array of TweenMax instances (one for each object in the targets array)

See also

staggerFromTo()method 
public static function staggerFromTo(targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array

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];
TweenMax.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 returns an array containing all of the resulting tweens (one for each object).

If you can afford the slight increase in file size, it is usually better to use TimelineLite's staggerFromTo() method because it wraps the tweens in a TimelineLite instead of an array which makes controlling the group as a whole much easier. That way you could pause(), resume(), reverse(), restart() or change the timeScale of everything at once.

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

By default, immediateRender is true in staggerFromTo() 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 (often the desired behavior when inserting into TimelineLite or TimelineMax instances).

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

targets:Array — An array of target objects whose properties should be affected
 
duration:Number — Duration in seconds (or frames if useFrames:true is defined in the vars parameter)
 
fromVars:Object — An object defining the starting value for each property that should be tweened. For example, to tween x from 100 and y from 200, fromVars would look like this: {x:100, y:200}.
 
toVars:Object — An object defining the end value for each property that should be tweened as well as any special properties like ease. For example, to tween x from 0 to 100 and y from 0 to 200, staggering the start times by 0.2 seconds and then call myFunction when they all complete, do this: TweenMax.staggerFromTo([mc1, mc2, mc3], 1, {x:0, y:0}, {x:100, y:200}, 0.2, myFunction});
 
stagger:Number (default = 0) — Amount of time in seconds (or frames if the timeline is frames-based) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+100", alpha:0}, 0.2).
 
onCompleteAll:Function (default = null) — A function to call as soon as the entire sequence of tweens has completed
 
onCompleteAllParams:Array (default = null) — An array of parameters to pass the onCompleteAll method.

Returns
Array — An array of TweenMax instances (one for each object in the targets array)

See also

staggerTo()method 
public static function staggerTo(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array

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];
TweenMax.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 returns an array containing all of the resulting tweens (one for each object).

If you can afford the slight increase in file size, it is usually better to use TimelineLite's staggerTo() method because it wraps the tweens in a TimelineLite instead of an array which makes controlling the group as a whole much easier. That way you could pause(), resume(), reverse(), restart() or change the timeScale of everything at once.

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

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

Parameters

targets:Array — An array of target objects whose properties should be affected
 
duration:Number — Duration in seconds (or frames if useFrames:true is defined in the vars parameter)
 
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like ease. For example, to tween x to 100 and y to 200 for mc1, mc2, and mc3, staggering their start time by 0.25 seconds and then call myFunction when they last one has finished, do this: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25, myFunction}).
 
stagger:Number (default = 0) — Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+100", alpha:0}, 0.2).
 
onCompleteAll:Function (default = null) — A function to call as soon as the entire sequence of tweens has completed.
 
onCompleteAllParams:Array (default = null) — An array of parameters to pass the onCompleteAll method.

Returns
Array — Array of TweenMax tweens (one for each object in the targets array)

See also

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

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

For example, if a 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 would go from 0 to 2 a total of 4 times.

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

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

Parameters

value:Number (default = NaN) — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining. Negative values will be interpreted from the END of the animation.
 
suppressEvents:Boolean (default = false) — If true, no events or callbacks will be triggered when the playhead moves to the new position defined in the value parameter.

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

See also

to()method 
public static function to(target:Object, duration:Number, vars:Object):TweenMax

Static method for creating a TweenMax instance that animates to the specified destination values (from the current values). This static method can be more intuitive for some developers and shields them from potential garbage collection issues that could arise when assigning a tween instance to a persistent variable. The following lines of code produce identical results:

TweenMax.to(mc, 1, {x:100});
var myTween = new TweenMax(mc, 1, {x:100});
var myTween = TweenMax.to(mc, 1, {x:100});

Each line above will tween the "x" property of the mc object to a value of 100 over the coarse of 1 second. They each use a slightly different syntax, all of which are valid. If you don't need to store a reference of the tween, just use the static TweenMax.to( ) call.

Since the target parameter can also be an array of objects, the following code will tween the x property of mc1, mc2, and mc3 to a value of 100 simultaneously:

TweenMax.to([mc1, mc2, mc3], 1, {x:100});

Even though 3 objects are animating, there is still only one tween created. In order to stagger or offset the start times of each object animating, please see the staggerTo() method (TimelineLite has one too).

For simple sequencing, you can use the delay special property (like TweenMax.to(mc, 1, {x:100, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical to() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.

Parameters

target:Object — Target object (or array of objects) whose properties this tween affects.
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: TweenMax.to(mc, 1, {x:100, y:200, onComplete:myFunction});

Returns
TweenMax — TweenMax instance

See also

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

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

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

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

Parameters

value:Number (default = NaN) — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining. Negative values will be interpreted from the END of the animation.

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

See also

totalProgress()method 
override public function totalProgress(value:Number, suppressEvents:Boolean = false):*

Gets or sets the tween's totalProgress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete. If the tween has a non-zero repeat defined, progress and totalProgress will be different because progress doesn't include any repeats or repeatDelays whereas totalProgress does. For example, if a TweenMax 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 myTween.totalProgress(0.5).play();

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

Parameters

value:Number (default = NaN) — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
 
suppressEvents:Boolean (default = false) — If true, no events or callbacks will be triggered when the playhead moves to the new position.

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

See also

updateTo()method 
public function updateTo(vars:Object, resetDuration:Boolean = false):*

Updates tweening values on the fly so that they appear to seamlessly change course even if the tween is in-progress. Think of it like dynamically updating the vars object that was passed in to the tween when it was originally created. You do NOT need to redefine all of the vars properties/values - only the ones that you want to update. You can even define new properties that you didn't define in the original vars object.

If the resetDuration parameter is true and the tween has already started (or finished), updateTo() will restart the tween. Otherwise, the tween's timing will be honored. And if resetDuration is false and the tween is in-progress, the starting values of each property will be adjusted so that the tween appears to seamlessly redirect to the new destination values. This is typically not advisable if you plan to reverse the tween later on or jump to a previous point because the starting values would have been adjusted.

updateTo() is only meant for non-plugin values. It's much more complicated to dynamically update values that are being handled inside plugins - that is not what this method is intended to do.

Note: If you plan to constantly update values, please look into using the DynamicPropsPlugin.

//create the tween
var tween:TweenMax = new TweenMax(mc, 2, {x:100, y:200, alpha:0.5});
//then later, update the destination x and y values, restarting the tween
tween.updateTo({x:300, y:0}, true);
//or to update the values mid-tween without restarting, do this:
tween.updateTo({x:300, y:0}, false);

Parameters

vars:Object — Object containing properties with the destination values that should be udpated. You do NOT need to redefine all of the original vars values - only the ones that should be updated (although if you change a plugin value, you will need to fully define it). For example, to update the destination x value to 300 and the destination y value to 500, pass: {x:300, y:500}.
 
resetDuration:Boolean (default = false) — If the tween has already started (or finished) and resetDuration is true, the tween will restart. If resetDuration is false, the tween's timing will be honored (no restart) and each tweening property's starting value will be adjusted so that it appears to seamlessly redirect to the new destination value.

Returns
* — self (makes chaining easier)
yoyo()method 
public function yoyo(value:Boolean = false):*

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

You can set the yoyo property initially by passing yoyo:true in the vars parameter, like: TweenMax.to(mc, 1, {x:100, repeat:1, yoyo:true});

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

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

Parameters

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

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

See also