Tweening Tips & Tricks

Hopefully you’ll find a few nuggets of wisdom here that bring your animation skills to the next level. The tips will cover all levels; beginner, intermediate and advanced. I’ll add to the list every so often and if you have any tips to share, please do so in the comments section below. To get notified when new tips are added, feel free to follow @greensock on Twitter and make sure you sign up for a free GreenSock account.

1) Get smoother rotations on large objects with transformMatrix

Flash applies rotation values in a much less precise way when you set the “rotation” property directly on a DisplayObject compared to setting its more complex transform.matrix (this has nothing to do with the tweening engine). The difference isn’t nearly as noticeable on small or medium sized objects, but as you can see in the example below, it’s quite noticeable on large objects. The TransformMatrixPlugin provides a simple way to get smoother, more precise, and faster rotations. Don’t forget to activate() the plugin first (see the Plugin Explorer).

2) Speed tips

TweenLite and TweenMax are already highly optimized for maximum speed, but here are a few tips to keep things performing their best:

  • Minimize the area of change that Flash must re-render on each frame refresh. Graphics rendering is by FAR the most CPU-intensive thing in most apps (ActionScript execution pales by comparison) and the more pixels that change on the screen, the harder it is for Flash to keep up. You could have a single tween fading a 2000×2000 image out that could bog the sysem down whereas running 500 tweens moving objects within a small 150×150 area on the screen could run great.
  • Vectors require more processing for Flash to render than bitmaps.
  • Avoid masks if possible. scrollRect is faster. BlitMask is even faster yet.
  • If you’re using TweenMax, speed things with FastEase. Most common eases are eligible for a speed boost like this and all you need to do is activate the ease(s) once in your swf like FastEase.activate([Linear, Quad, Strong]); See the ASDocs for details.
  • When scaling and/or rotating an object, use the TranformMatrixPlugin instead of directly tweening rotation/scaleX/scaleY. Like:
    //normal, 1, {scaleX:2, scaleY:2, rotation:30});
    //slightly faster, 1, {transformMatrix:{scaleX:2, scaleY:2, rotation:30}});

    Keep in mind that tweening the tranformMatrix of an object affects ALL transform properties like x, y, scaleX, scaleY, rotation, width, and height so if you need to have another concurrent tween running that affects one or more of those properties, don’t use trasnformMatrix.

  • Since it is very slightly faster, use TweenLite instead of TweenMax unless you need a TweenMax-specific feature for that particular tween. Remember, TweenMax extends TweenLite so if you’re already using TweenMax in your project, it costs absolutely no more kb to use TweenLite also. Feel free to mix and match.
  • Callbacks are faster than event listeners. For TweenMax it’s better to use onComplete than addEventListener(TweenEvent.COMPLETE, myFunction). That’s especially true for onUpdate vs TweenEvent.UPDATE.
  • If your animation looks a little jerky, it may be caused by cacheAsBitmap being set to true on your animating object(s). Whenever cacheAsBitmap is true, it only allows the object to render on whole pixel values which can make it look slightly jerky at slow speeds. Important: whenever a DisplayObject has a filter applied to it (blur, glow, drop shadow, etc.), it forces cacheAsBitmap to true and cannot be reset to false unless the filter is removed. That’s a Flash limitation and has nothing to do with the tweening engine.

3) Simplify animation workflow with animateIn() and animateOut()

Once you understand this concept, it can revolutionize the way you animate. Don’t skip past this one if you’re comfortable with object-oriented programming (this might be a little beyond newbies).

It’s very common for apps to have various screens (or states or slides) that must be transitioned from one to another. For example, the home page animation has various “slides” that animate into place, stay on screen for a while, then animate out. As one slide finishes animating out, the other is already starting to animate in to keep things snappy. It can get clumsy trying to coordinate all those tweens manually each time a transition needs to occur especially because some slides must do more (and longer) animation to get stuff onto and off of the screen. Wouldn’t it be great if you created animateIn() or animateOut() methods for your objects that did all the work? Sure. That’s not exactly revolutionary. But what if those methods tucked all of the associated tweens into an object that could be controlled easily and scheduled to run in a sequenced fashion? That would be swell indeed.

TimelineLite and TimelineMax to the rescue.

Build your objects with animateIn() and animateOut() methods whose sole job is to construct a TimelineLite (or TimelineMax) instance and spit it back. You’ll see the power of this shortly. Here’s a very simple example that does an autoAlpha fade:

//you build these functions into your objects (classes, MovieClips, whatever):
function animateIn():TimelineLite {
    var tl:TimelineLite = new TimelineLite();
    tl.append( new TweenMax(this, 0.5, {autoAlpha:1}) );
    return tl;

function animateOut():TimelineLite {
    var tl:TimelineLite = new TimelineLite();
    tl.append( new TweenMax(this, 0.5, {autoAlpha:0}) );
    return tl;

Of course you could add more tweens into the TimelineLite, like sliding lines of text onto or off of the screen, etc. But now if we need to transition between slide1 and slide2, we could nest the TimelineLite instances inside another one to make sequencing and overall control simple:

var tl:TimelineLite = new TimelineLite();
tl.append( slide1.animateOut() );
tl.append( slide2.animateIn() );

And if I want them to overlap by 0.25 seconds, I can easily do that using the offset parameter in append(), like:

var tl:TimelineLite = new TimelineLite();
tl.append( slide1.animateOut() );
tl.append( slide2.animateIn(), -0.25);

If I want to build an entire slide show with each slide staying on the screen for 5 seconds, I can do that like:

var tl:TimelineLite = new TimelineLite();
tl.append( slide1.animateIn() );
tl.append( slide1.animateOut(), 5);
tl.append( slide2.animateIn(), -0.25);
tl.append( slide2.animateOut(), 5);

Now if I decide that I want to tweak slide2′s animateIn() animation so that it also slides some text into place and takes 3 seconds instead of 0.5 seconds, that’s fine – everything adjusts automatically! This makes updates simple and painless.

I could even attach a scrubber to that master TimelineLite in order to allow the user to fastforward/rewind or I could change the timeScale to make everything go in slow motion or I can reverse() or restart() the entire animation anytime. If you notice, after the animation completes on the home page, a slider fades into place and you can skip through the animation as you please. That’s how it’s done. Everything is completely ActionScript-driven.

If you haven’t done so yet, I’d highly recommend watching the brief video explaining how TimelineLite works at

Sub-tip: You can add optional onComplete and onCompleteParams parameters to your animateIn() and animateOut() methods so that you can call myObject.animateOut(myFunction, [param1, param2]) to have it run its animation and then call myFunction(param1, param2).

Want to see the source files for the home page animation? “Shockingly Green” and corporate Club GreenSock members can send me an e-mail request (it uses special plugins like motionBlur, physics2D, and others that are membership benefits of Club GreenSock – that’s why it’s not available to everyone).

Carl Schooff created a video that covers this technique at

4) Relative vs absolute values

When a value is cast as a String, TweenLite and TweenMax will interpret it as relative. For example, let’s say you want to tween mc 100 pixels up from where it is but you don’t know exactly what y-coordinate that represents:, 1, {y:"-100"});

//or to cast a numeric variable as a String...
var destY:Number = -100;, 1, {y:String(destY)});

5) TweenMax.allTo() – multiple targets to common values

Let’s say you’ve got an array of objects that you want to fade out and move down 100 pixels from wherever they are. No need to loop through the array and create each tween; just use TweenMax.allTo(). You can even stagger the start times (let’s stagger by 0.1 seconds here):

TweenMax.allTo([btn1, btn2, btn3], 1, {alpha:0, y:"100"}, 0.1);

TweenMax.allTo() can be useful when you want to instantly change the properties of all objects in the array as well – simply do a zero-duration allTo():

//set all objects in myArray to alpha:0 and visible:false
TweenMax.allTo(myArray, 0, {autoAlpha:0});

There are also TweenMax.allFrom() and TweenMax.allFromTo() methods available. And since all of these methods return an array of tweens, you can easily insert them into a TimelineLite or TimelineMax like myTimeline.insertMultiple( TweenMax.allTo([mc1, mc2, mc3], 1, {autoAlpha:0}) );

6) Play a MovieClip backward and forward with a tween

The FramePlugin makes it pretty simple to set up a tween that controls a MovieClip which means you can simply play(), reverse(), pause(), or restart() the tween. In this example, we’ll create a tween and when the user rolls over the MovieClip, it will play and when they roll out, it will reverse:

mc.stop(); //stop the MovieClip first.
var tween:TweenMax = TweenMax.fromTo(mc, mc.totalFrames - 1, {frame:1}, {frame:mc.totalFrames, ease:Linear.easeNone, useFrames:true, paused:true});

mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
function rollOverHandler(event:MouseEvent):void {;
function rollOutHandler(event:MouseEvent):void {

7) Common mistake: MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT

MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT can be dispatched many times during a single rollover. They are triggered every time the mouse interacts with a CHILD of the object. So, for example, if you have a Sprite that contains a TextField with words in it, as the mouse moves over each letter, a MOUSE_OVER event would be dispatched by the Sprite and as the mouse moves off each letter, a MOUSE_OUT would be dispatched! This can cause your tweens to appear to act strangely (“why do my tweens look like they keep starting and stopping as I roll over the Sprite?”). It is almost always better to listen for MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT instead.

8) Use delayedCall() to call a function later

This is actually more reliable than setTimeout() because there were bugs in some versions of Flash related to setTimeout() especially on the Mac:

//calls myFunction(myParam1, myParam2) after 2 seconds
TweenLite.delayedCall(2, myFunction, [myParam1, myParam2]);

9) The Plugin Explorer is your friend

The Plugin Explorer not only writes activation code for any set of plugins, but also gives examples that demonstrate the correct syntax. It is in all of the download zips as well as online.

10) Kill the easing with Linear.easeNone

To eliminate the easing in a tween (which is Quad.easeOut by default for more natural motion), simply use the Linear.easeNone ease.

11) Tween a tween? A timeline? Huh?

You can pause() a TimelineLite or TimelineMax or TweenLite or TweenMax and then tween its currentTime property to fastforward or rewind it, complete with easing. You can even tween the timeScale property to make it gradually speed up or slow down (the only exception is a TweenLite because it doesn’t have a timeScale property).

12) Delay the initial render in a from() or zero-duration tween

Simply pass immediateRender:false in the vars parameter to prevent a from() or zero-duration tween from rendering immediately.

More resources

There are some great video tutorials, articles, and written tutorials covering various aspects of the tweening platform on the learning resources page.

Got a tip or trick?

Post it in the comments section below. If you have a question, it’s typically best to post it in the forums at

  • Twitter
  • Facebook
  • Digg
  • StumbleUpon
  • Yahoo! Buzz
  • Google Bookmarks
  • RSS
  • LinkedIn
  • Reddit

Comments (36) RSS

Posted by Peter_D on September 24, 2010

Very useful tricks :)

Posted by Tahir Ahmed on September 24, 2010

Awesome .. keep them coming :)

Posted by fenixkim on September 24, 2010

Wow, these tricks are very interesting, especially the transformMatrix plugin, did not know that it caused such a difference. I also liked the notes about optimization.

Thanks Jack for sharing these tricks with us.


Posted by Tom on September 24, 2010

nice indeed!
animateIn and animateOut might be just the thing I’m looking for!
Thanks again Jack – great timing!

Posted by Karl Freeman on September 24, 2010

Wow, Im going to have to strip out half an article I was working on Called Tweenlite tips & tricks for Bugger! you beat me to some usefull tips here.

As Allways, thanks and keep up the hard work

Posted by marc on September 24, 2010

Thank you Jack! Very very useful.

Posted by andré felipe on September 24, 2010

Thanks Jack for you great effort!

Posted by Randy on September 24, 2010

Thanks for these tips. Very useful.

Question: In tip 3 (Simplifying work flow), when I copy and paste your code I get an error of: Error #1006: animateIn is not a function

I’ve checked all of my spelling, etc. but still can’t figure this one out.

Any idea?

Thanks again.

Posted by Jack on September 24, 2010

Randy, animateIn() and animateOut() are functions you create – they’re not built-in for all objects. It was just a concept that demonstrated how you can create a common set of methods like that for building your tweens. Feel free to name them transitionIn() and transitionOut() or whatever you want.

Posted by carl schooff on September 24, 2010

I learned like 5 things from this and have another 5 to wrap my head around. Can’t wait to really really have timelineLite/Max under my belt. There is so much potential. Thanks for providing this documentation.


Posted by Nathan Mynarcik on September 24, 2010

Fantastic read! Definitely going to try this on future projects!

Posted by Ricky on September 24, 2010

Jack, thanks for these tips! It’s great to see them compiled all in one place. Maybe on itty bitty suggestion? First paragraph of tip number 1, link the words “Plugin Explorer”?

Seriously dude, you are pro status. Love TweenMax and LoaderMax!

Posted by Zach Zurn on September 24, 2010

Thank you for the tips! Your libraries are simply amazing and very useful.

The ROLL_OVER and ROLL_OUT tip was very useful, I was just running into some problems with MOUSE_OVER and MOUSE_OUT.

One problem I ran into is that I am using a Vector with Movie Clips instead of an array, so I wasn’t able to use the TweenMax.allTo() function.

Posted by Paulo Figueiredo on September 24, 2010

Thanks Jack for sharing those.
Optimization is a big concern of mine for some time now. Will try the fastEase, transformMatrix and animateIn/Out right away.

As my scripted animations become more and more lenghty and complex, the animationIn/Out concept is surelly very welcome. Thanks!

Posted by Thor on September 24, 2010

I never thought of using ROLL_OVER/OUT
I always use(d) MOUSE_OVER/OUT along with mouseChildren = false. – Dunno if it is just as good?

Posted by Jack on September 24, 2010

Thor, I suppose that’s pretty similar. Just an extra step. But sometimes it’s important to maintain mouse interactivity in children while only responding to rollovers/outs in the parent, so in that case it wouldn’t be a very good solution. Personally I think it’s better and more clean to simply use the appropriate listeners, ROLL_OVER/ROLL_OUT.

Posted by Girish on September 24, 2010

Once Again, you did it Jack. This is very useful and informative. The Timelinelite video tutorial was very helpful too. Have you thought of making more of those?

Posted by LL on September 24, 2010

Great nuggets indeed Jack. I hope you find time to round up some more as these are wonderful. Really beneficial to the greensock community. Great stuff!

These would also be a great addition to the older thread on the forum:

Keep up the great work.

Posted by Greeze on September 24, 2010

Great list of tips! Thank you!

I have one more small one to add:
If you want to change the default easing for your tweens, you have to do it through TweenLite. TweenMax doesn’t have a public defaultEase property.

Posted by dadastudio on September 24, 2010

hello, thanks for this. very useful.

But how to combine shortRotationPlugin with transformMatrix.rotation ? It would be nice to have transformMatrix.shortRotation :)

Posted by Jack on September 24, 2010

Your wish is my command, dadastudio. I just added shortRotation to transformMatrix. Enjoy.

Posted by randygland on September 25, 2010

Doesn’t TweenMax extend TweenLite? In that case then TweenMax inherits TweenLite’s defaultEase property!

Posted by Sci-Fi-Si on September 25, 2010

Nice one Jack, great idea having this page.

Posted by Brecht on September 25, 2010

Great post Jack, always good to get the best practices from the creator himself! Very usefull!

Posted by dadastudio on September 26, 2010

Yay :) thanks.

Posted by arnold on September 28, 2010

Hoping for more Tutorials here, I cant wait to have a membership, but there are only few tuts available..
anyway thanks.

Posted by Andrew on September 29, 2010

Thanks Jack! This was very useful. Looking forward to the next one!

Posted by LGLab on October 15, 2010

Nice one, thanks Jack ;-)

Posted by Luis Cornejo on October 27, 2010

Jack, regarding the FaseEase utility. The docs say that only
Linear, Quad, Cubic, Quart, Quint, Strong are eligible for activation. Is there a reason Sine is not in there. Is it because it runs fast enough? Also, can you explain a little about how the ease function is cached? As in, if I have a tween in memory and just play/reserve it a lot, would my tween benefit? Or is the benefit realized when its instantiated and not on runtime?



Posted by Jack on October 28, 2010

Luis, the reason that only Linear, Quad, Cubic, Quart, and Strong are eligible is because of the WAY they ease. Their formulas are almost identical – the only variation is the power/strength of the curve. Sine, Elastic, Back, and some other eases are completely different, though, so they cannot be plugged into the algorithm I used to accelerate the ease calculations.

As far as when you see the benefit of FastEase, it’s definitely at runtime. Every time the tween renders (every frame), it would be slightly less load on the CPU.

Posted by Casey on November 16, 2010

Jack, your work is incredible. I recently realized just how dependent I’ve become on your suite of world class products. They are _awesome_. TimelineMax is a dream, and these tips are very useful.

Thanks for everything,


Posted by Ivan on November 18, 2010

These tips and ticks have been verey helpful. Keep them coming.

Posted by Dico on December 15, 2010

Thank you for this awesome tutorials/tips!
Very useful! :)

Posted by Peter_D on February 9, 2011

I think it is the best place to put my tool here.
This is a simple side panel with Tween Lite/Max Plugin Explorer.
With this tool you have immediate access to all plugins and animation syntax just like on Greensock web page.
The link is:

Have fun :)

Posted by BladePoint on December 29, 2012

The FastEase ASDocs should link here:

Posted by Jack on January 1, 2013

Thanks for pointing that out, BladePoint. Please note that FastEase is deprecated now in v12. Its functionality is now built into the core engine.

To download the code, you must agree to the following license:


  1. You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See for details.
  2. Use at your own risk. No warranties are offered.
  3. Please respect the copyright.



This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc. ("GREENSOCK") for the proprietary GreenSock code known as TweenLite, TweenMax, TweenNano, TimelineLite, TimelineMax, and other copyrighted code that is available for download at (this code and documentation, as well as any updates which may at GREENSOCK's sole discretion be provided to you from time to time, are referred to in this Agreement as "PROGRAM"). By downloading, copying, or otherwise using the PROGRAM, you agree to the terms and conditions of this Agreement. If you do not agree to the terms and conditions of this Agreement, please do not download or use the PROGRAM.

A. Subject to the terms and conditions of this Agreement, GREENSOCK hereby grants you a non-exclusive, worldwide, non-transferable right to use the PROGRAM in apps, web sites, games, components and other software applications ("Developed Works") for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed Developed Work for which end users are charged a fee (either for usage or access), simply sign up for the appropriate "Business Green" Club GreenSock membership at

A. You agree that you will not sell, rent, or license the PROGRAM's source code or any derivative works thereof to any third party without the prior written consent of GREENSOCK. Distribution of the PROGRAM as part of your Developed Work is acceptable so long as it is used exclusively as a part of your Developed Work. You agree not to modify or delete GREENSOCK'S existing copyright notices located in the source code.

B. You may use, duplicate, and distribute the compiled object code as embedded in Developed Works created by you, either for your own use or for distribution to a third party so long as end users of the Developed Work are not charged a fee for usage of or access to any portion of the Developed Work. Please see for descriptions of Developed Works that qualify for the "No Charge" license.

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

A. The license rights granted to you under this Agreement are at no charge, but only in the following circumstances: If on your own behalf or on behalf of a third party you incorporate the PROGRAM into a web site, app, game, program or any component thereof (collectively, "Developed Work"), which in the case of a web site, must be accessible to internet users without payment of a fee of any kind, and in the case of a software application, game, program or component, neither you nor anyone to whom you distribute the Developed Work charges a user a fee of any kind to use such Developed Work or application, game, program or component into which such Developed Work is embedded. The foregoing shall apply regardless of whether you are paid to create such Developed Work.

B. In the event your intended use of the PROGRAM does not meet the criteria for the "no charge" license rights set forth in the immediately preceding paragraph, then you are not licensed to use the PROGRAM under this Agreement and must license the PROGRAM under GREENSOCK'S separate fee-based Software License Agreement which is granted to "Business Green" Club GreenSock members (see for details).

C. You may make modifications to the source code exclusively for your own use in order to perform bug fixes or other minor edits required to operate the PROGRAM as originally intended.

A. The PROGRAM is licensed, not sold, and is protected by copyright laws and international treaty provisions. You acknowledge that no title to the intellectual property in the PROGRAM is transferred to you. You further acknowledge that title and full ownership rights to the PROGRAM, including all intellectual property rights therein, will remain the exclusive property of GREENSOCK and you will not acquire any rights to the PROGRAM except as expressly set forth in this Agreement. You agree that any copies of the PROGRAM you make will contain the same proprietary notices which appear on and in the PROGRAM. You agree that GREENSOCK may identify you as a licensee unless you make a written request otherwise. GREENSOCK hereby grants to you the right to disclose that your product, game, software application, component, or other Developed Work makes use of GREENSOCK code (for example, "Powered by TweenLite").

A. THE PROGRAM IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. GREENSOCK DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE PROGRAM WILL MEET YOUR REQUIREMENTS OR THAT OPERATION WILL BE UNINTERRUPTED OR ERROR FREE. GREENSOCK shall not be liable for special, indirect, incidental, or consequential damages with respect to any claim on account of or arising from this Agreement or use of the PROGRAM, even if GREENSOCK has been or is hereafter advised of the possibility of such damages. Because some states do not allow certain exclusions or limitations on implied warranties or of liability for consequential or incidental damages, the above exclusions may not apply to you. In no event, however, will GREENSOCK be liable to you, under any theory of recovery, in an amount in excess of $250. Notwithstanding anything else in this agreement, you agree to indemnify GREENSOCK, its assignees, and licensees, and hold each of them harmless from and against any and all claims, losses, damages, and expenses, including legal fees arising out of or resulting from any negligent act or omission by you.

B. GREENSOCK may, at its sole discretion, provide support services related to the PROGRAM, but has no obligation to do so.

If you at any time fail to abide by the terms of this Agreement, GREENSOCK shall have the right to immediately terminate the license granted herein and pursue any other legal or equitable remedies available.

A. This Agreement shall be construed in accordance with the laws of the State of Illinois. In the event of any dispute between you and GREENSOCK with respect to this Agreement, we both agree that if we cannot resolve the dispute in good faith discussion, either of us may submit the dispute for resolution to arbitration with the American Arbitration Association before a single arbitrator using the AAA Rules for Commercial Arbitration. The arbitrator's decision is final and can be enforced in any court with jurisdiction over such matters.

B. This agreement represents the complete and exclusive statement of the agreement between GREENSOCK and you and supersedes all prior agreements, proposals, representations and other communications, verbal or written, between them with respect to use of the program. This agreement may be modified only with the mutual written approval of authorized representatives of the parties.

C. The terms and conditions of this Agreement shall prevail notwithstanding any different, conflicting, or additional terms or conditions which may appear in any purchase order or other document submitted by you. You agree that such additional or inconsistent terms are deemed rejected by GREENSOCK.

D. GREENSOCK and you agree that any xerographically or electronically reproduced copy of this Agreement shall have the same legal force and effect as any copy bearing original signatures of the parties.

Copyright 2006-2013, GreenSock, Inc. Updated 2012-08-28

I'd like to learn how to get bonus plugins, update notifications, SVN access, and more.
To continue, you must agree to the following license: