GreenSock

TweenLite (AS3) – A Lightweight, FAST Tweening Engine

Posted in Tweening by jack on the October 18th, 2007

Version: 10.09, Updated 3/20/2009
Compatibility: Flash Player 9 and later (ActionScript 3) (click here for the AS2 version)
File Size added to SWF: About 2.8kb (base), or 5kb with default plugins

v11 Beta available - There are some very exciting things happening with the upcoming version 11 of the platform, including new sequencing tools (TimelineLite/Max) and a useFrames feature. I'd love to get your feedback and suggestions before officially launching it. Get details and download the AS3 code here.

This is a big update. Please watch the "what's new in v10?" video and get more details on the official announcement page.

Plugin architecture - Most special properties (like "tint", "blurFilter", "frame", "bezier", etc.) are separated into optional "plugins" that can be activated (or not). This makes it possible to add only the features you need, minimizing file size and maximizing performance. Author your own plugins to handle whatever special properties you want too! This adds a whole new level of flexibility. And don't worry - all the necessary plugins necessary for backwards compatibility are activated inside the class by default.
TweenFilterLite retired - With the new plugin architecture, you can activate the filter plugins in TweenLite or TweenMax, so TweenFilterLite is obsolete.
New "frameLabel" feature - Tween to a frame label on the timeline of any MovieClip
New "setSize" feature - Allows for easy tweening of component width/height using setSize()
New "remove", "index", and "addFilter" properties for filter tweens - Allows you to remove a filter when the tween completes, define a particular index number in the target DisplayObject's filters Array, and/or force TweenLite/Max to create a new filter even if there's a filter of the same kind already applied to a DisplayObject.
New "transformAroundCenter" feature - scale, rotate, or move a DisplayObject/MovieClip using its center as the origin regardless of where the actual registration point is. (membership benefit of Club GreenSock)
New "transformAroundPoint" feature - scale, rotate, or move a DisplayObject/MovieClip using any point as the origin regardless of where the object's registration point is. (membership benefit of Club GreenSock)
New "colorTransform" feature - Adds simple tweening of a DisplayObject's "exposure", "brightness", or "tintAmount" as well as advanced colorTransform properties like redMultiplier, redOffset, greenMultiplier, etc.
Changed "shortRotation" syntax - Previously, shortRotation could only affect the "rotation" property of an object, not 3D rotations like rotationX, rotationY, and rotationZ. Now [after activating the shortRotation plugin] you can pass an object with any number of properties that should be affected, like TweenLite.to(mc, 2, {shortRotation:{rotationX:-170, rotationY:100}}).
Speed improvements - Up to 40% faster under heavy loads!

TweenLite is an extremely lightweight, FAST, and flexible tweening engine that serves as the core of the GreenSock tweening platform. There are plenty of other tweening engines out there to choose from, so here's why you might want to consider TweenLite:

SPEED - I'm not aware of any popular tweening engine with a similar feature set that's as fast as TweenLite. See the speed comparisons yourself.
Feature set - In addition to tweening ANY numeric property of ANY object, TweenLite can tween filters, hex colors, volume, tint, saturation, contrast, frames, and even do bezier tweening, plus LOTS more. TweenMax extends TweenLite and adds even more capabilities like pause/resume, rounding, event listeners, timeScale, and more. Overwrite management is an important consideration for a tweening engine as well which is another area where the GreenSock tweening platform shines. You have options for AUTO overwriting or you can manually define how each tween will handle overlapping tweens of the same object.
Expandability - With its new plugin architecture, you can activate as many (or as few) features as your project requires. Or write your own plugin if you need a feature that's unavailable. Minimize bloat, and maximize performance.
Management features - TweenGroup makes it surprisingly simple to create complex sequences and groups of TweenLite/Max tweens that you can pause(), resume(), restart(), or reverse(). You can even tween a TweenGroup's "progress" property to fastforward or rewind the entire group/sequence.
Ease of use - Designers and Developers alike rave about how intuitive the GreenSock tweening platform is.
Updates - Frequent updates and feature additions make the GreenSock tweening platform reliable and robust.
AS2 and AS3 - Most other engines are only developed for AS2 or AS3 but not both.

If you'd like an introduction to the GreenSock Tweening Platform, read a PDF version of the chapter (4MB) I recently authored in Flash AS3 for Interactive Agencies by Randall Haws.

Every call to TweenLite.to() or TweenLite.from() returns a TweenLite instance which you can optionally keep track of in order to have more control. Here are a few examples of how to create instances:

PLAIN TEXT

Actionscript:

import gs.*;
TweenLite.to(mc, 1, {x:200}); //automatically garbage collects
var myTween:TweenLite = TweenLite.to(mc, 1, {x:200}); //stores a reference of the TweenLite instance, but you're responsible for making sure it becomes eligible for garbage collection when you're finished with it (simply set your variable to null, or if it is still in progress, call TweenLite.removeTween(myTween) first)
var myTween:TweenLite = new TweenLite(mc, 1, {x:200}); //identical to the previous line - it just looks more object-oriented.

TweenLite(target:Object, duration:Number, vars:Object);

Description: Constructor. Properties are tweened from whatever they are at the time the tween begins to whatever you define in the variables parameter. (unless you use "runBackwards:true" which is the same as using TweenLite.from())
Parameters:
1. target: Target object whose properties we're tweening. This can be ANY object, not just DisplayObjects/MovieClips
2. duration: Duration (in seconds) of the tween
3. vars: An object containing the end values of all the properties you'd like to have tweened (or if you're using the TweenLite.from() method, these variables would define the BEGINNING values). Putting quotes around values will make the tween relative to the current value. For example, x:"-20" will tween x to whatever it currently is minus 20 whereas x:-20 will tween x to exactly -20. To tween the scaleX and scaleY to 0.5, you'd do TweenLite.to(mc, 1, {scaleX:0.5, scaleY:0.5}); There are also some "special properties" that you can include in your vars object which perform special tasks, as described below:
  Special Properties (**Optional**):
  - delay : Number - The number of seconds you'd like to delay before the tween begins. This is very useful when sequencing tweens
  - ease : Function - You can specify a function to use for the easing with this variable. For example, gs.easing.Elastic.easeOut. The Default is a regular easeOut. To build a custom ease, check out the GreenSock CustomEase Builder tool.
  - easeParams : Array - An Array of extra parameter values to feed the easing equation. This can be useful when you use an equation like Elastic and want to control extra parameters like the amplitude and period. Most easing equations, however, don't require extra parameters so you won't need to pass in any easeParams.
  - onStart : Function - If you'd like to call a function as soon as the tween begins, pass in a reference to it here. This can be useful when there's a delay and you want something to happen just as the tween begins.
  - onStartParams : Array - An array of parameters to pass the onStart function.
  - onUpdate : Function - If you'd like to call a function every time the property values are updated (on every frame during the time the tween is active), pass a reference to it here.
  - onUpdateParams : Array - An array of parameters to pass the onUpdate function
  - onComplete : Function - If you'd like to call a function when the tween has finished, use this.
  - onCompleteParams : Array - An array of parameters to pass the onComplete function
  - persist : Boolean - if true, the TweenLite instance will NOT automatically be removed by the garbage collector when it is complete. However, it is still eligible to be overwritten by new tweens even if persist is true. By default, it is false.
  - renderOnStart : Boolean - If you're using TweenLite.from() (or runBackwards:true) with a delay and want to prevent the tween from rendering until it actually begins, set this special property to true. By default, it's false which causes TweenLite.from() to render its values immediately, even before the delay has expired.
  - runBackwards : Boolean - Flips the start and end values in a tween. The from() method automatically sets this value to true.
  - overwrite : int - Controls how other tweens of the same object are handled when this tween is created. You can set a default value to be used with ALL tweens in your SWF using the OverwriteManager's init() method, or control them individually with this overwrite property. Here are the options:
    1. 0 (NONE): No tweens are overwritten. This is the fastest mode, but you need to be careful not to create any tweens with overlapping properties, otherwise they'll conflict with each other.
    2. 1 (ALL): (this is the default unless OverwriteManager.init() has been called) All tweens of the same object are completely overwritten immediately when the tween is created.
      TweenLite.to(mc, 1, {x:100, y:200});
      TweenLite.to(mc, 1, {x:300, delay:2, overwrite:1}); //immediately overwrites the previous tween
    3. 2 (AUTO): (used by default if OverwriteManager.init() has been called) Searches for and overwrites only individual overlapping properties in tweens that are active when the tween begins.
      TweenLite.to(mc, 1, {x:100, y:200});
      TweenLite.to(mc, 1, {x:300, overwrite:2}); //only overwrites the "x" property in the previous tween
    4. 3 (CONCURRENT): Overwrites all tweens of the same object that are active when the tween begins.
      TweenLite.to(mc, 1, {x:100, y:200});
      TweenLite.to(mc, 1, {x:300, delay:2, overwrite:3}); //does NOT overwrite the previous tween because the first tween will have finished by the time this one begins.

complete():void

Description: forces the tween to complete immediately.

TweenLite.to(target:Object, duration:Number, vars:Object):TweenLite

Description: Creates a new TweenLite instance for you, but shields you from having to create a variable to store it in which can make garbage collection more difficult.
PLAIN TEXT
Actionscript:
1. var myTween:TweenLite = new TweenLite(mc, 1, {x:300});
2. TweenLite.to(mc, 1, {x:300}); //exactly the same as the previous line, but handles garbage collection automatically.
Parameters: Same as Constructor (see above)

TweenLite.from(target:Object, duration:Number, vars:Object):TweenLite

Description: Exactly the same as TweenLite.to(), but instead of tweening the properties from where they're at currently to whatever you define, this tweens them the opposite way - from where you define TO where ever they are now (when the method is called). This is handy for when things are set up on the stage where the should end up and you just want to animate them into place.
Parameters: Same as TweenLite.to(). (see above)

TweenLite.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array):TweenLite

Description: Provides an easy way to call any function after a specified number of seconds. Any number of parameters can be passed to that function when it's called too.
Parameters:
1. delay: Number of seconds before the function should be called.
2. onComplete: The function to call (do not add parenthesis "()" after the name!)
3. onCompleteParams [optional] An Array of parameters to pass the onComplete function when it's called.

TweenLite.killTweensOf(target:Object, complete:Boolean):void

Description: Provides an easy way to kill all tweens of a particular Object. You can optionally force it to immediately complete (which will also call the onComplete function if you defined one)
Parameters:
1. target: All tweens of this Object will be killed.
2. complete: If true, the tweens for this object will immediately complete (go to the ending values and call the onComplete function if you defined one).

TweenLite.killDelayedCallsTo(function:Function):void

Description: Kills all delayed calls to a particular function (ones that were created using the TweenLite.delayedCall() method).
Parameters:
1. function: All delayed calls to this function will be killed.

TweenLite.removeTween(tween:TweenLite):void

Description: Kills a single tween instance.
Parameters:
1. tween: The TweenLite instance that you'd like to kill.

Tween the alpha to 50% (0.5) and move the x position of a MovieClip named "clip_mc" to 120 and fade the volume to 0 over the course of 1.5 seconds like so:

PLAIN TEXT

Actionscript:

import gs.TweenLite;
TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120, volume:0});

Tween the clip_mc MovieClip over 5 seconds, changing the alpha to 50% (0.5), the x coordinate to 120 using the Back.easeOut easing function, delay starting the whole tween by 2 seconds, and then call a function named "onFinishTween" when it has completed and pass in a few parameters to that function (a value of 5 and a reference to the clip_mc), you'd do so like:

PLAIN TEXT

Actionscript:

import gs.*;
import gs.easing.*;
TweenLite.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(parameter1:Number, parameter2:MovieClip):void {
trace("The tween has finished! parameters: " + parameter1 + ", and " + parameter2);
}

If you have a MovieClip on the stage that is already at its end position and you just want to animate it into place over 2 seconds (drop it into place by changing its y property to 100 pixels higher on the screen and dropping it from there), you could:

PLAIN TEXT

Actionscript:

import gs.*;
import gs.easing.*;
TweenLite.from(clip_mc, 2, {y:"-100", ease:Elastic.easeOut});

Is the new version of TweenLite/Max backwards compatible?
The short answer is "yes", but I'd strongly encourage you to check out the "what's new in v10?" video on the official announcement page for details.
How do I activate extra plugins?
Check out the Plugin Explorer above. Not only does it provide interactive examples of each plugin, but it also writes the activation code for you and shows how many Kb the plugins will cost.
How do I install the class? Do I have to import it on every frame?
Just make sure the "gs" folder from the download is in the same folder as your FLA file. Keep the class files in the "gs" folder (don't remove them). That's it. And, yes, just like any Class, you need to import TweenLite at the top of any frame that contains code referencing it. This does NOT add extra kb to your file size every time you import it. Flash is smart enough to embed it once and all the other import statements just act as a "pointer" to the embedded Class.
Why do my tweens keep getting overwritten? How can I prevent that?
By default, when you create a tween, TweenLite looks for all existing tweens of the same object and kills them immediately. However, you can add advanced management of overwriting (including AUTO overwriting of only overlapping properties) using the OverwriteManager class. Or pass "overwrite:false" in your tween's vars object to ignore overwriting completely (be careful).
Can I set up a sequence of tweens so that they occur one after the other?
Of course! That's precisely what TweenGroup is for. But if file size is a huge concern, you could just use the delay property (make sure you set the "overwrite" special property to 0, 2, or 3). Here's an example where we colorize a MovieClip red over the course of 2 seconds, and then move it to a y coordinate of 300 over the course of 1 second:

PLAIN TEXT
Actionscript:
1. import gs.TweenLite;
2. TweenLite.to(clip_mc, 2, {tint:0xFF0000});
3. TweenLite.to(clip_mc, 1, {y:300, delay:2, overwrite:0});
Do the properties have to be in a specific order?
Nope. The only thing that matters is that the first parameter is the object you're tweening, the second parameter is the time (in seconds), and the third parameter contains all the properties you want to tween (in any order). So TweenLite.to(clip_mc, 1, {scaleX:120, y:200, x:1}) is the same as TweenLite.to(clip_mc, 1, {x:1, y:200, scaleX:120});
Why are TweenLite and TweenMax split into 2 classes instead of building all the functionality into one class?
1. File size. The majority of tweening doesn't require the extra features in TweenMax like pause()/resume(), reverse(), setDestination(), timeScale, etc. so TweenLite is perfectly sufficient. TweenLite prioritizes small file size whereas TweenMax prioritizes a rich feature set.
2. Speed. TweenLite is slightly faster than TweenMax because it requires less code, although you'd probably never notice any difference unless you're tweening multiple thousands of instances. See the speed test.
Is there a way I can get code hinting and strict datatyping in TweenLite/TweenMax?
Sure, I developed some utility classes to do just that. Learn more here.
Do I have to purchase a license to use this code? Can I use it for commercial purposes?
You may use the code at no charge in commercial or non-commercial web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to 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 simply sign up for a corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. See http://blog.greensock.com/club/ for details. Club GreenSock members get some bonus plugins/classes, update notifications, and more. Your donations keep this project going. Please see the licensing page for details on licensing.

Feel free to post your question on the forums. You'll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.

Author: Jack Doyle, (e-mail: jack -at- greensock.com)
Copyright 2009, GreenSock (This work is subject to the terms here.)

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

"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT

-----------------------------------------------------------------------------
PLAIN ENGLISH SUMMARY:

You may use the code at no charge in commercial or non-commercial web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to 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 corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. See http://blog.greensock.com/club/ for details.
Use at your own risk. I offer no warranties.
Please respect the copyright.

-----------------------------------------------------------------------------

LEGALESE:

This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc. ("GREENSOCK") for the proprietary GreenSock ActionScript code known as TweenLite, TweenMax, TweenGroup, OverwriteManager, and other code that is freely available for download at http://blog.greensock.com or http://www.greensock.com (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.

I. LICENSE
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 web sites, games, applications, components and other software for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed software product for which end users are charged a fee (either for usage or access), simply sign up for a corporate Club GreenSock membership at http://blog.greensock.com/club/.

II. LIMITATION OF LICENSE AND RESTRICTIONS
A. You agree that you will not disclose, 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. Derivative works are defined as modifications that add substantive functionality to the PROGRAM and do not include bug fixes or other minor modifications required to operate the PROGRAM as originally intended. Distribution of the source code as part of your Work Product is acceptable so long as the recipients agree to the terms of this Agreement. You agree not to modify or delete GreenSock's existing copyright notice located in the source code.

B. You may use, duplicate, and distribute the compiled object code as embedded in a Work Product created by you, either for your own use or for distribution to a third party so long as end users of the Work Product are not charged a fee for usage. Please see http://blog.greensock.com/licensing/ for descriptions of Work Products that qualify for the "No Charge" license.

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

B. In the event your intended use of the Software 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 corporate Club GreenSock members (see http://blog.greensock.com/club/ for details).

IV. TITLE AND OWNERSHIP
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.

V. DISCLAIMER OF WARRANTY AND LIMITATION OF LIABILITY
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 the license fee paid by you under this Agreement. 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, demands, losses, damages, liabilities, costs, and expenses, including legal fees.

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

VI. TERMINATION
GreenSock may terminate this Agreement at any time if you fail to comply with the terms and conditions of this Agreement.

VII. MISCELLANEOUS
A. This Agreement shall be construed in accordance with the laws of the State of Illinois. Should you for any reason bring a claim, demand, or other action against GREENSOCK, its agents or employees, arising out of this Agreement or the PROGRAM licensed herein, you agree to bring said claim only in the Illinois Court of Claims.

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.

I'd like to donate & get bonus classes, update notifications, SVN access, and more.

71 Comments

71 Responses to 'TweenLite (AS3) – A Lightweight, FAST Tweening Engine'

Subscribe to comments with RSS

ian h said,

on July 24th, 2007 at 6:39 pm

Hi,

This class is great, I have been using it extensively throughout my newest project. One thing I would like to do, which has given me problems, is something like:

TweenLite.to(fader, 2, {alpha: 0});
TweenLite.to(fader, 2, {alpha:1, delay: 2});

Just a fade out, and then back in. Is this the correct implementation, because it seems to do nothing.

Anyways, thanks again,
ian
jack said,

on July 24th, 2007 at 7:52 pm

ian, keep in mind that by default, TweenLite will overwrite tweens of the same object (to avoid conflicts) unless you specify overwrite:false. So your second tween was overwriting your first one. It should be more like:

TweenLite.to(fader, 2, {alpha:0});
TweenLite.to(fader, 2, {delay:2, alpha:1, overwrite:false});

Good luck ian!
Doug said,

on August 1st, 2007 at 12:34 pm

This class is fantastic. Much better than Tweener and better documentation too.
felix said,

on August 7th, 2007 at 1:56 pm

bravo! this is load of functionality to squeeze into 2k!

I love the fact that it overwrites previous tweens on the same object by default. This means if you apply many tweens to the same object (for example a button color tween on rollover/rollout), you don’t start leaking memory due to piling up tween objects (which I think may happen using Tweener?)
dave said,

on August 10th, 2007 at 6:48 am

The class works great!
How can the params of the ‘ease:Elastic.easeOut’ be changed so the ‘bouce is either less or more of a bounce?

e.g. TweenLite.to(myMovie2, 1, {y:300, delay:4, ease:Elastic.easeOut, overwrite:false});

As above to make the easeOut less of a bounce?

regards,

Dave
jack said,

on August 10th, 2007 at 9:22 am

Dave, good news: the new release of TweenLite indeed supports passing extra parameters to your easing equation. You just need to use the special easeParams property, like:

TweenLite.to(my_mc, 2, {_x:200, ease:Elastic.easeOut, easeParams:[1.5, 2.45]});
John Battagline said,

on August 13th, 2007 at 12:48 pm

I’m pretty new to flash, but I tried out TweenLite…and I love it already. It’s exactly what I’m looking for: powerful, lightweight, and miraculously easy to use.

Just wanted to say thanks.
Make said,

on August 14th, 2007 at 6:45 pm

itÂ´s a incredible job! :) thank u! itÂ´s much clearer than the Tween class of AS3… :)

Make
Mike said,

on August 22nd, 2007 at 1:41 pm

Jack, I was wondering if it is possible include additional properties like Blur, etc?

This looks soo cool by the way, thanks for developing such an amazing resourrce!
jack said,

on August 22nd, 2007 at 1:52 pm

Mike, yes, absolutely you can tween filter effects like blurs, drop shadows, and a whole lot more with TweenLite’s “big brother” TweenFilterLite. It extends TweenLite, so the file size hit is incredibly small for the power it packs. You probably just didn’t notice the link to it on the TweenLite page. Check it out at http://www.tweenfilterlite.com. It’s available in AS2 and AS3 flavors.
snowboardfoo said,

on August 30th, 2007 at 7:19 pm

Awesome, awesome, awesome.

I have been developing my own animation library for years and switching it over to AS3 is a pain for sure.

You’ve done a really great job so far, keep up the good work!
Kristofer said,

on August 30th, 2007 at 7:51 pm

This is exactly what I was looking for. YOU ARE THE MAN!
Thank you for all your work.
Rick Jones said,

on September 17th, 2007 at 2:17 pm

Excellent job fixing Macradobe’s tween problem. I kept banging my head thinking that I was doing something wrong when using Adobe’s Tween class, due to the tweens hanging on me. Found out that it is a current bug. You can read this blog here to see others who are experiencing this issue: http://alvinzhang.info/?p=4

Oh and btw sent you some cash for your hard work. Really do appreciate it.
Ken Carpenter said,

on October 21st, 2007 at 8:37 pm

Hi Jack,

Just playing around with TweenLite and loving it so far. My mind if overflowing with ideas!

I tried to add both a â€œfromâ€ and a â€œtoâ€ tween to your second example with the text as shown below. I wanted to drop the words in the same way, but have them tween â€œtoâ€ a random color at the same time: You can drop this into your Sample_2.fla. Here is the code again:

//Drop the words into place
for (i = 1; i <= 7; i++) {
mc = this["word"+i+"_mc"];
// var color:int = (Math.random() * 0xFFFFFF) + 0xFF000000;
var color:int = 0xFF;
TweenLite.from(mc, 2, {y:mc.y – 140, autoAlpha:0, ease:Elastic.easeOut, delay:i * 0.35});
TweenLite.to(mc, 2, {tint:color, overwrite:false, delay:i * 0.35});
}
jack said,

on October 22nd, 2007 at 9:17 am

Ken, You can do a TweenLite.to() and a TweenLite.from() on the same object BUT here’s the reason your tweens looked like they didn’t work (they actually did – just not the way you expected):

When you tween the tint (what used to be mcColor), it must factor in the alpha value because the ColorTransform affects it. For example, if you set a MovieClip’s alpha to 0.5 and then use a ColorTransform to make it 0xFF0000, the alpha will end up being 1 unless you factor in the alphaMultiplier. TweenLite tries to accommodate this by looking to see if the same TweenLite instance is also tweening alpha. If it is, it uses that alpha value in the alphaMultiplier, otherwise it uses the MovieClip’s current alpha. In your case, when the TweenLite.to() started to run, the alpha was zero, and since there was no alpha being tweened in that same instance, it used that “current” value so your MovieClips had an alpha of zero the whole time. It would be possible to add code to TweenLite to look through all the other tweens of an object to see if there are any other instances affecting the alpha, but I’ve resisted doing so because it would increase the Kb and slow things down slightly, not to mention there’s an easy workaround:

To get around it, all you need to do is make sure you tween the alpha in the same TweenLite as the tint, like so:

TweenLite.from(mc, 2, {y:mc.y – 140, autoAlpha:0, ease:Elastic.easeOut, delay:i * 0.35});
TweenLite.to(mc, 2, {tint:color, autoAlpha:100, overwrite:false, delay:i * 0.35});
dzedward said,

on October 24th, 2007 at 2:18 pm

I’ve found the built in Tween class in AS3 to be inconsistent, I switched to your class, and have yet to have a problem. Excellent work I must say.
Brendan said,

on October 26th, 2007 at 12:32 pm

Jack, I totally agree with your reasoning here and have implemented my own ENTER_FRAME event listener and it works great.

The code i’m using:

onStart:function(){container.addEventListener(Event.ENTER_FRAME, render)}, onComplete:function(){container.removeEventListener(Event.ENTER_FRAME, render)}

would you recommend using onStartParams/onCompleteParams to do this instead of the way i’m currently doing it?

Thanks for the help and the speedy reply!
jack said,

on October 26th, 2007 at 12:40 pm

Brendan, that looks like a great solution! Thanks for sharing.
Steve said,

on November 19th, 2007 at 4:24 am

Hi Jack,

This thing is absolutely mind blowing!!

I’m trying to use TweenLite to make a masked movieClip that contains many thumbnails to scroll left/right (scrolling gallery).

Is there a way for me to set the codes to tween the movieClip 50 pixels to the left or right instead of moving it to a specific X value on the stage??

In other words, I want to make it so that each time a user click on either the PREV or NEXT button, the movieClip will tween 50 pixels to the left or to the right.

Thanks a million for sharing it!!
jack said,

on November 19th, 2007 at 8:47 am

Steve, all you need to do is put quotes around your values to make them relative. So to move your MovieClip 50 pixels to the left, you’d do:
TweenLite.to(my_mc, 2, {x:”-50″});
Ignazio said,

on November 22nd, 2007 at 6:33 am

Hi,
I’m also trying this very good class.
How can I do a relative movement using a variable as value?

TweenLite.to(my_mc, 2, {x:â€+offsetâ€³});
doesn’t work.
jack said,

on November 22nd, 2007 at 9:06 am

Ignazio, you can use a variable for relative offsets by coercing it into a String, like:
TweenLite.to(my_mc, 2, {x:String(offset)});
Wondering said,

on November 27th, 2007 at 3:43 am

Hi jack, a little question.

Is there any way to set up a sequence of Tweens, and set it up so when the sequence of tweens is finished, it calls another function?

Lets say I have a Sprite full of movieclips which all individually motion-tween into place. when i move to a next section of the website, i have tweens set up that make all of the movieclips fly back out of the screen.

however, i want it so only once every Tween has finished, then the function will be called to load in the next section of the website.

the only thing i can think of is having all my Tweens onComplete each call some function, which counts a number, and when the number hits a certain amount, it calls my load function.

however, is there a more elegant way of doing this, or is that just about it?
jack said,

on November 27th, 2007 at 8:53 am

“Wondering”, sure, you certainly can set up a sequence of tweens and then call a function when they’re all done. The answer is simpler than you may think. Just use delays and then use the onComplete of the LAST tween in the sequence to trigger the function. Like so:

TweenLite.to(mc1, 2, {x:100});
TweenLite.to(mc1, 1, {y:100, delay:2, overwrite:false});
TweenLite.to(mc1, 3, {x:300, delay:3, overwrite:false, onComplete:onFinish});

function onFinish():void {
trace(”The sequence has finished!”);
}

Or you could use the TweenLite.delayedCall() to call a function after a set amount of time (when you know the tweens will be finished).

Or even better, check out TweenMax’s sequence() and multiSequence() methods! http://www.TweenMax.com
Aaron said,

on December 3rd, 2007 at 3:33 pm

Just wondering about bezier tweens. I cant seem to find any information about how to do it or even if they are supported. but everything else seems great and i use tween lite for pretty much everything i do now.

thanks
jack said,

on December 5th, 2007 at 3:08 pm

Aaron, TweenLite doesn’t support bezier tweens at this point. One of the primary goals of the class is to keep it extremely lightweight, so I have to protect the file size diligently. But I just released TweenMax which does include that feature (and many more). check it out at http://www.TweenMax.com.
sean said,

on December 14th, 2007 at 5:25 pm

I’m new to tweenlite and have yet to play with it (I will when I get some time), but was wondering if with tweenlite you still need to worry about garbage collection like you do with built-in AS3 tween class or if you put something in to handle this.
Thanks
jack said,

on December 14th, 2007 at 5:49 pm

Sean, there’s no need to worry about garbage collection. It’s all built into the class. Just tween away to your heart’s content. Check out the speed test I whipped together and crank up the number of tweens – you should see that it scales very well and doesn’t bog down after a while (which you’d expect if there were garbage collection issues).
Matthew Wallace said,

on December 18th, 2007 at 1:28 pm

Dude,

Thanks so much for this code. I use it on all my projects. I was one that used the Fuse Kit all the time but started doing all my projects in AS3 and this saves the day and works way better.

thanks
kneural said,

on December 21st, 2007 at 12:15 am

got it!, thank you so much jack! TweenLite is amazing and makes things so much easier. esp with. TweenLite.from and the “” relative values. saves me so much more time and brain power when writing code. Its light-weightness is just what i need!

Your the best!
Pierce said,

on January 5th, 2008 at 4:05 pm

Jack,

Thanks for the great work; it’s been a life- and project-saver.
Scott Gibson said,

on January 15th, 2008 at 4:18 pm

Just wanted to say that you have made my life so much easier – thanks so much for working so hard on it. Now if you can just apply this simplistic logic to textfield creation and formatting… or maybe a component library…
Jeroen said,

on January 21st, 2008 at 6:07 pm

Jack,

I came across your class while searching around for fixes for the standard Tween class’s! It was a big relief to implement your class! Everything was going so much faster! I really like it and I certainly will use it in other projects too!

I’ve used it for a school-project. This is my first Flash-based website actually. Most of the site is self-study. I’m not a Flash pro (yet) :D I like the project, but I want to move on to bigger/better things!

Annyways, you can take a look when clicking my name, it’s not perfect, but I’m quite happy with it, knowing it was only three months ago that I used Flash for the first time!

Thanks for you great work! I’ve given it further to some friends from school, they were really exited! :)

Jeroen.
Justin said,

on January 22nd, 2008 at 1:53 pm

Bless your heart Jack.

I think this might offer everything I need. I especially like being able to add a delay before starting tweens, and it’s also great to see that this offers built in garbage collection so I don’t have to push my tweens to an array and then clear out the array every time.
Matthew said,

on January 29th, 2008 at 9:39 pm

Jack, this is absolutely fantastic, just did some tests of my own, TweenLite as3 is even getting along really well with Papervision3D.

Would you ever consider implementing bezier functionality? Or adding an extended class that supports it? It’s the only reason we would have to need tweener over TweenLite now.
jack said,

on January 30th, 2008 at 11:23 am

Yep, Matthew, wish granted. Bezier tweening is now available in TweenMax :-)
http://www.TweenMax.com
David said,

on February 11th, 2008 at 9:05 pm

I’m glad I found this tweening engine on google, I am new to actionscript and this makes things easy for me, thanks for all your hard work. I wanted to ask about tweening many items in a row. I have 6 movieclips that I tween one right after the other. After the tween completes, am I supposed to remove the tween from memory somehow to make upcoming events run smooth? Like my_mc = null; or something?
jack said,

on February 11th, 2008 at 11:51 pm

Nope, David, you don’t need to worry about memory management or “garbage collection” tasks with TweenLite. It handles it all for you. Once a tween has finished (actually, within about 2 seconds), it’ll delete itself. Tween with reckless abandon. Go crazy.
ashim said,

on February 20th, 2008 at 11:25 pm

Jack, this is absolutely brilliant. I even feel like going over old project to shift from my earlier engine. Wish I could convince clients to pay me for it.
I was wondering however, how hard it would be to extends this to allow pause and resume of Tweens. Haven’t started looking through your code yet as I’m really busy and more than a little scared to try. But maybe there was a reason you haven’t built this in.
Cheers, and thank you very much.
jack said,

on February 21st, 2008 at 1:30 am

Well, Ashim, I’ve got good news and bad news for you…

First the bad news: Since one of my top priorities is keeping file size down and speed up, I don’t plan to add pause/resume functionality to TweenLite. A lot of agencies and developers have standardized on TweenLite because it is very lightweight and nimble, so I feel an obligation to diligently guard the file size. Many other tweening engines have suffered from “feature bloat” over time and I’m trying to avoid that.

Now for the good news: TweenMax is exactly what you need. It’s available now at http://www.TweenMax.com

Same syntax, same core. Just a bunch of extra features like bezier tweening, pause/resume, isTweening(myObject), sequencing, and getTweensOf(myObject).
Ive said,

on February 26th, 2008 at 12:40 pm

Great Job! I like TweenLite full hearted and it helps me a lot in craeting a AS3 game! It tooks me 10 mins to read and understand before I make my object moves!!

Thanks for this great engine!! Keep the good work!
Daniel said,

on March 4th, 2008 at 10:22 am

is it possible to only put 50% on the tint so that the whole object doesnt change colour?
thanks
jack said,

on March 13th, 2008 at 5:35 pm

Daniel, TweenLite doesn’t tint to percents, but there are a few options you have:

1) Use TweenFilterLite to colorize it (using the ColorMatrixFilter). See the interactive sample at http://www.tweenfilterlite.com for more info. This can be a really cool effect, and it does allow for various percents (amount).

2) Sign up for Club GreenSock and to get the bonus ColorTransformProxy utility class I created for use in conjunction with TweenLite for tweening all the various ColorTransform-related properties, including redOffset, greenOffset, blueOffset, redMultiplier, greenMultiplier, blueMultiplier, tint, and even tintPercent and brightness!. Sign up at http://blog.greensock.com/club/
AmerSoft said,

on March 17th, 2008 at 12:39 am

Do you know what the loveliest thing is for me? (Beside its great features, free one)?
It is that you keep developing both AS2 & AS3 versions for both TweenLite , TweenFilterLite. This makes me depend on the same amazing twining class in both cases whether I want to develop a AS2 or AS3 projectâ€¦

Thank you , you are live saver.
Antonio Lea said,

on March 18th, 2008 at 8:16 pm

This is extremely useful. I really appreciate for making this available to public.
felixz said,

on March 21st, 2008 at 4:09 am

when applying this code, nothing happens…
this.soundChannel=this.sound.play();
TweenLite.from(this.soundChannel,2.5,{volume:0});
jack said,

on March 21st, 2008 at 11:06 am

felixz, I’m not exactly sure what your “this.sound” refers to, but I tried this and it worked perfectly:

var snd = new Sound();
snd.load(new URLRequest(”myMusic.mp3″));
this.soundChannel = this.snd.play();
TweenLite.from(this.soundChannel, 5, {volume:0});

Keep in mind, though, that this was a local test and I didn’t add any code that would wait to start the tween until the sound loaded (if you try this over a web connection, there will be some lag time in the MP3 load, and if you start the tween right away it might finish before the sound even loaded)
anoxamoon said,

on March 26th, 2008 at 2:34 am

TWEENLITE is the best thing that happened to me this year!

I JUST LOVE it…. I can’t get enough of it. I am making effects that would’ve been rendered impossible using other tween engines!
MadTea said,

on March 28th, 2008 at 6:34 am

Heya!

Just wanted to pop by and thank you for making my life easier. Tweenlite has been with me for a bit over 4 months now, and I’ve loved every second of time spent with its smooth algorithmic self. It makes me wobbly, but in a good way. ;)

So keep up the good work, it is well appreciated!

Cheers
MadTea
Andrew Merskin said,

on March 28th, 2008 at 1:02 pm

Hey!

I had a quick question about killing tweens.

My problem is, I have TweenLite tweens in my ROLL_OVER, ROLL_OUT, and CLICK events. When I click on my object, it plays the tween inside of my CLICK handler, which has overwrite set to false. When I roll out of my object, the CLICK tween gets overwritten anyway.

I don’t have overwrite: false set on the ROLL_OVER, and ROLL_OUT tweens because I want them to overwrite each other when I roll over or roll out of the object, but I don’t want them overwriting my CLICK tween ever.

What can I do?

Thanks,
Andy
jack said,

on March 31st, 2008 at 5:08 pm

Yeah, Andrew, that’s a unique challenge. Not impossible to overcome, though. You can selectively remove tweens with the complete() or removeTween() methods. You’d just need to keep track of your TweenLite instances to know which ones to delete. For example, maybe you store the ROLL_OVER and ROLL_OUT tweens in a variable and then kill it when necessary, kinda like:

var rollTween:TweenLite;
function onRollOver($e:MouseEvent):void {
TweenLite.removeTween(rollTween);
rollTween = TweenLite.to(my_mc, 1, {scaleX:1.2, overwrite:false});
}
function onRollOut($e:MouseEvent):void {
TweenLite.removeTween(rollTween);
rollTween = TweenLite.to(my_mc, 1, {scaleX:1, overwrite:false});
}
function onClick($e:MouseEvent):void {
TweenLite.to(my_mc, 1, {scaleX:2});
}
happyMan said,

on April 30th, 2008 at 6:06 am

wow. i was just starting to look at the liveDocs on the tween class with a heavy heart when i found this and my day got brighter. If i use this as much as i think i will i’ll be donating for sure. you just saved me a half days head scratching at least. thanks muchly.
Bentley said,

on June 8th, 2008 at 12:02 pm

Thanks for the awesome tweening engine :D
I have been using the built-in tween class for ages, but recently (today :) ) changed to TweenLite.

Not only has it been extremely simple to use, but it’s also much faster (which initially surprised me, as I expected the less dynamic built-in class to be faster) and it’s great not having to work with garbage collection e.t.c.

Thanks again,
Bentley
xenix said,

on June 24th, 2008 at 4:07 pm

Man this tween class saved me!!! Actionscript 3 Tween class should be as successful as TweenLite.. really disappointed in adobe…
Anony said,

on July 26th, 2008 at 11:44 am

Hi,

I like the tint feature, but what if I want my movieclip to only tint to a color just a little bit? Like I’m trying to let someone know their mouse is over it. My image turns bloodshot red, I’d like it to be just a tiny bit redder.
jack said,

on July 27th, 2008 at 2:54 am

Anony, youâ€™ve got several options:

1) Use TweenFilterLite’s (or TweenMax’s) colorMatrixFilter to colorize your clip slightly, like:
TweenFilterLite.to(my_mc, 1, {colorMatrixFilter:{colorize:0xFF0000, amount:0.2}});

2) Use the ColorTransformProxy class I created as a membership benefit for all Club GreenSock members. It has a tintPercent property, so you can control how much of a tint your MovieClip gets. See http://blog.greensock.com/colortransformproxy/ for an interactive demo. Join Club GreenSock at http://blog.greensock.com/club/
furkan said,

on July 30th, 2008 at 6:18 am

This documentation is the best and useful docementation thanks jack.
viktor hesselbom said,

on August 6th, 2008 at 5:02 am

Hi,

Just wanted to say that I got really used to using the ActionScript 3.0 built-in Tween class and was sceptical at first when I got told it’s better to make the switch to a custom built.

But I had to look it up and when I found this class all I really needed to look at was the syntax and functionality and I was hooked! And the speed increase is just a neat bonus.

Expect some donations in a near future. ;)
Bryant Miano said,

on October 3rd, 2008 at 11:39 am

This amazing. Thank you for your hard work and for sharing such an immensely useful tool!
Tomer said,

on October 5th, 2008 at 10:47 am

Amazing work. Seriously this has saved me so much time and effort, and I’m sure the same is for hundreds of other developers.

As soon as I get payed for this project I’m working on, I’ll be sure to donate.
Rob said,

on October 23rd, 2008 at 6:02 pm

Wow. Brilliant.

Was getting increasingly unhappy with the bloat of Adobe’s built-in Tweening class. Thanks so much. I get paid at the end of the month, will definately drop a donation in your paypal.
Agustin said,

on October 24th, 2008 at 1:24 am

I’m completely sold!!!
I’ve just tried replacing Adobe’s Tween for your TweenLite on some camera movements, and all of the sudden everything rendered ridiculously fast!!!
and I have been blaming away3D for ALL the slugishness… (still, having performance issues with the renderer) but man! it made a huge difference, I don’t care if it’s a few bites heavier and not strict typing, I just saved about 100 lines of code and that was just one of the camera’s Classes.

Oh, by the wayâ€¦ non-coding designers in my office appreciated the speed more than anyone else. Now they hate me for not showing them this sooner.

thanks for all. I’m blown away
snel said,

on October 27th, 2008 at 6:13 pm

Class is really good. a lot better than Tweener and the documentation is really awesome
reaper said,

on November 8th, 2008 at 3:31 pm

Wow
Wow
WOOOOOOOOOOOOOOOW!!!
grabek said,

on November 25th, 2008 at 2:56 am

the more I use it, the more I’m addicted to it!

and this time, addiction is not a bad thing!
Jeremy Glover said,

on February 13th, 2009 at 3:46 pm

Thank you so much for this awesome code. It saves me a ton of time and is soooo efficient and flexible. Great work!
Sheena said,

on February 14th, 2009 at 5:11 pm

Just saved me so much time trying to do the simplest thing from scratch. You are amazing! Thank you for taking the time to do this and share it with the rest of us, awesome work!
Sean said,

on February 27th, 2009 at 5:39 pm

Great utility — I’m replacing Tweener with this in my code.

I guarantee I’ll be purchasing a license for this for my current and future products — good work!
FinancialServicesRenoNV said,

on March 28th, 2009 at 4:33 pm

Greetings all members,

I would just like to say hello and let you know that I’m happy to be a member – been a lurker long enough :)

Hope to contribute some and gain some knowledge along the way….
AmerSoft said,

on April 24th, 2009 at 7:52 am

Congratulation Jack !! it was my real pleasure when I saw “Todd Perkins” the Flash specialist and Adobe Certified Instructor recommends your TweenLite as the “powerful and favorite tween engine” in his “Flash CS4 Professional OOP” video tutorial at Lynda.com:
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=759
Yes , I vote with him too , your engine is the best , Thank you for sharing this great engine with us , YOU ROCK !! :)
Jk_ said,

on June 12th, 2009 at 3:07 am

Todd Perkins recommended your website and ever since I found it, I fell in love with your engine. Each day I discover something new, something which eases my life as a web-developer! Thank you very much for it.

Top Pages

More Info

Search

Categories

Associates

TweenLite (AS3) – A Lightweight, FAST Tweening Engine

71 Responses to 'TweenLite (AS3) – A Lightweight, FAST Tweening Engine'

Leave a Reply