TweenMax

TweenMax extends the extremely lightweight, fast TweenLite engine, adding many useful features like AS3 event dispatching, updateTo(), yoyo(), repeat(), repeatDelay(), rounding, and more. It also activates many extra plugins by default, making it extremely full-featured. Since TweenMax extends TweenLite, it can do anything TweenLite can do plus much more. The syntax is identical.

Plugins

Plugins allow you to expand the capabilities of TweenLite/Max by handling specific properties in unique ways. Each plugin is associated with a special property name and it takes responsibility for handling that property. For example, the FrameLabelPlugin is associated with the "frameLabel" special property so if it is activated it will intercept the "frameLabel" property in the following tween and manage it uniquely:

TweenMax.to(mc, 1, {frameLabel:"myLabel"});

If the FrameLabelPlugin wasn't activated, TweenMax would act as though you were trying to literally tween the mc.frameLabel property (and there is no such thing). FrameLabelPlugin is one of the many plugins activated by default in TweenMax.

Activating a plugin requires a single line of code and you only need to do it ONCE in your application, 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]);

To make it even easier, I created the 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 shows interactive examples of each plugin and the associated code so that it's easy to see the correct syntax. Take note of how how many plugins are automatically activated in TweenMax.


Get Adobe Flash player

TweenMax automatically activates many plugins by default, but you can change which plugins it activates by opening the class file and commenting or uncommenting the necessary lines towards the top of the class (clearly labeled).

Sample code

NOTE: All sample code is in AS3, but the AS2 version works exactly the same except the property names may be different, like _x instead of x, _alpha instead of alpha, etc. And in AS3, alpha/scaleX/scaleY go from 0-1 whereas in AS2, _alpha/_xscale/_yscale go from 0-100. This has nothing to do with TweenLite/Max - it's just a change Adobe made in the AS3 language.

//import the GreenSock classes
import com.greensock.*;
import com.greensock.easing.*;

//tween the MovieClip named "mc" to an alpha of 0.5 over the course of 3 seconds
TweenMax.to(mc, 3, {alpha:0.5});

//scale myButton to 150% (scaleX/scaleY of 1.5) using the Elastic.easeOut ease for 2 seconds
TweenMax.to(myButton, 2, {scaleX:1.5, scaleY:1.5, ease:Elastic.easeOut});

//tween mc3 in FROM 100 pixels above wherever it is now, and an alpha of 0. (notice the vars object defines the starting values instead of the ending values)
TweenMax.from(mc3, 1, {y:"-100", alpha:0});

//tween mc4 from x:100 to x:300 while changing its tint from whatever it is when the tween starts to red (0xFF0000)
TweenMax.fromTo(mc4, 1, {x:100}, {x:300, tint:0xFF0000});

//after a delay of 3 seconds, tween mc for 5 seconds, sliding it across the screen by changing its x property to 300, using the Back.easeOut ease to make it shoot past it and come back, and then call the onFinishTween() function, passing two parameters: 5 and mc
TweenMax.to(mc, 5, {delay:3, x:300, ease:Back.easeOut, onComplete:onFinishTween, onCompleteParams:[5, mc]});
function onFinishTween(param1:Number, param2:MovieClip):void {
    trace("The tween has finished! param1 = " + param1 + ", and param2 = " + param2);
}

//call myFunction() after 2 seconds, passing 1 parameter: "myParam"
TweenMax.delayedCall(2, myFunction, ["myParam"]);

//tween every MovieClip in the "letters" Array up 100 pixels (changing their "y" property to a relative value of "-100") over 2 seconds while fading out, and stagger the start time of each tween by 0.1 seconds. There could literally be hundreds of MovieClips in the "letters" Array and this one line of code would tween them all!
TweenMax.staggerTo(letters, 2, {y:"-100", alpha:0}, 0.1);

//use the object-oriented syntax to create a TweenMax instance and store it so we can reverse, restart, or pause it later. Make it repeat twice with a 1-second delay between each repeat cycle.
var myTween:TweenMax = new TweenMax(mc2, 3, {y:200, repeat:2, repeatDelay:1, onComplete:myFunction});

//some time later (maybe in by a ROLL_OUT event handler for a button), reverse the tween, causing it to go backwards to its beginning from wherever it is now.
myTween.reverse();

//pause the tween
myTween.pause();

//restart the tween
myTween.restart();

//make the tween jump to its halfway point
myTween.progress(0.5);

Additional Methods

TweenMax inherits a ton of methods from TweenLite and has quite a few of its own. Get details on each in the TweenMax documentation.

  • TweenLite and TweenMax Methods
  • delay()
  • delayedCall()
  • duration()
  • eventCallback
  • from()
  • fromTo()
  • getTweensOf()
  • invalidate()
  • isActive()
  • kill()
  • killDelayedCallsTo()
  • killTweensOf()
  • pause()
  • paused()
  • play()
  • progress()
  • restart()
  • resume()
  • reverse()
  • reversed()
  • seek()
  • set()
  • startTime()
  • time()
  • timeScale()
  • to()
  • totalDuration()
  • totalProgress()
  • totalTime()
  • Methods exclusive to TweenMax
  • getAllTweens()
  • isTweening()
  • killAll()
  • killChildTweensOf()
  • pauseAll()
  • repeat()
  • repeatDelay()
  • resumeAll()
  • staggerFrom()
  • staggerFromTo()
  • staggerTo()
  • updateTo()
  • yoyo()

Get GSAP

Version: 1.19.0 updated 2017-01-17

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock