Get GSAP

Version: 1.14.2 updated 2014-10-29

Core

    Extras

      Plugins

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

        TweenLite

        TweenLite is an extremely fast, lightweight, and flexible tweening engine that serves as the foundation of the GreenSock Animation Platform. A TweenLite instance handles tweening one or more numeric properties of any object over time, updating them on every frame. Sounds simple, but there's a wealth of capabilities and conveniences at your fingertips with TweenLite. With plenty of other tweening engines to choose from, here's why you might want to consider TweenLite:

        • SPEED - TweenLite has been highly optimized for maximum performance. Check out the Speed Test to see how it stacks up against other engines under stress.
        • Feature set - In addition to tweening any numeric property of any object, TweenLite can tween filters, hex colors, volume, tint, frames, and even do bezier tweening, plus LOTS more. TweenMax extends TweenLite and adds even more capabilities like repeat, yoyo, repeatDelay, timeScale, event dispatching, on-the-fly destination value updates, rounding and more. Overwrite management is an important consideration in 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 plugin architecture, you can activate as many (or as few) features as your project requires. Write your own plugin to handle particular special properties in custom ways. Minimize bloat, and maximize performance.
        • Sequencing, grouping, and management features - TimelineLite and TimelineMax make it surprisingly simple to create complex sequences or groups of tweens that you can control as a whole. play(), pause(), restart(), or reverse(). You can even tween a timeline's time() or progress() to fastforward or rewind the entire timeline. Add labels, play("someLabel"), change the timeline's timeScale(), nest timelines within timelines, and lots more.
        • Ease of use - Designers and Developers alike rave about how intuitive the platform is.
        • Support - Not only is the platform actively updated, but there are dedicated forums for getting your questions answered at www.greensock.com/forums. When you're up against a deadline and run across some odd behavior, this can be a life saver. Using a stale open source alternative with limited or no active support can be costly indeed for your business.
        • AS2 and AS3 - Most other engines are only developed for AS2 or AS3 but not both.

        Getting started

        If you're new to the GreenSock Tweening Platform, check out the "getting started" page. You'll be up and running in no time.

        Documentation

        For your convenience, the special properties are listed below as well, but to read up on all the methods and properties, definitely check the ASDocs.

        Interactive demo - tweening basics

        Get Adobe Flash player

        Special properties

        You can pass any of the following special properties in through the constructor's "vars" parameter like new TweenLite(mc, 1, {x:100, delay:1.5, paused:true, onComplete:myFunction}) to control various aspects of the tween (or use a TweenLiteVars object):

        • delay : Number - Number of seconds (or frames if useFrames is true) that should elapse before the tween begins.
        • paused : Boolean - Sets the initial paused state of the timeline (by default, tweens automatically begin playing)
        • useFrames : Boolean - If useFrames is set to true, the tween's timing mode will be based on frames. Otherwise, it will be based on seconds/time. NOTE: a tween's timing mode is always determined by its parent timeline.
        • ease : FunctionUse any standard easing equation to control the rate of change. For example, Elastic.easeOut. The Default is Quad.easeOut.
        • easeParams : Array An Array of extra parameters to feed the easing equation (beyond the standard first 4). This can be useful when using an ease 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.
        • immediateRender : Boolean Normally when you create a tween, it begins rendering on the very next frame (when the Flash Player dispatches an ENTER_FRAME event) unless you specify a delay. This allows you to insert tweens into timelines and perform other actions that may affect its timing. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a tween with a duration of zero from rendering immediately, set this to false.
        • overwrite : int Controls how (and if) other tweens of the same target are overwritten by this tween.
          • NONE (0) (or false)
          • ALL_IMMEDIATE (1) (or true) - this is the default mode for TweenLite.
          • AUTO (2) - this is the default mode
          • CONCURRENT (3)
          • ALL_ONSTART (4)
          • PREEXISTING (5)

          Example: TweenLite.to(mc, 1, {x:100, overwrite:0});

        • onStart : Function - A function that should be called when the tween begins (when its currentTime is at 0 and changes to some other value which can happen more than once if the tween is restarted multiple times).
        • onStartParams : Array - An Array of parameters to pass the onStart function.
        • onUpdate : Function A function that should be called every time the tween's time/position is updated (on every frame while the tween is active)
        • onUpdateParams : Array - An Array of parameters to pass the onUpdate function
        • onComplete : Function - A function that should be called when the tween has completed. To sense when a tween has reached its starting point again after having been reversed, use onReverseComplete.
        • onCompleteParams : Array - An Array of parameters to pass the onComplete function
        • onReverseComplete : Function - A function that should be called when the tween has reached its starting point again after having been reversed
        • onReverseCompleteParams : Array - An Array of parameters to pass the onReverseComplete function

        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:

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

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

        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:

        import com.greensock.plugins.*;
        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 assocaited code so that it's easy to see the correct syntax.



        Get Adobe Flash player

        TweenLite does not activate any plugins by default, but TweenMax does. When a plugin is activated, it affects both TweenLite and TweenMax. You can activate plugins directly inside the TweenLite class if you prefer by commenting or uncommenting the necessary lines towards the top of the class (clearly labeled).

        Sample AS3 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
        TweenLite.to(mc, 3, {alpha:0.5});
        
        //scale myButton to 150% (scaleX/scaleY of 1.5) using the Elastic.easeOut ease for 2 seconds
        TweenLite.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)
        TweenLite.from(mc3, 1, {y:"-100", alpha:0});
        
        //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
        TweenLite.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"
        TweenLite.delayedCall(2, myFunction, ["myParam"]);
        
        //use the object-oriented syntax to create a TweenLite instance and store it so we can reverse, restart, or pause it later.
        var myTween:TweenLite = new TweenLite(mc2, 3, {y:200, alpha:0.5, 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 exactly its 2-second point
        myTween.time(2);
        

        Speed

        The speed test below was built to demonstrate and quantify any speed differences among a few of the tweening engines out there. No trickery involved; the same code drives everything except for the tweens themselves. Basically it tweens white “stars” from the center outward at random angles, sizes, and with random delays. When a star’s tween ends, it just repositions itself at the center and starts again. You can play with the number of stars and the duration of the tweens to see how the tweening engines handle various types of loads.

        Get Adobe Flash player

        You may be wondering what the “(FAST*)” means. FAST uses a “fastTransform” plugin that takes advantage of strict data typing to speed things up slightly – it just demonstrates the concept of using a plugin to apply tweens in custom ways.

        I did my best to make the test as fair as possible by using a typical implementation that most people would use for a single tween, and multiply that many times over to stress-test it. It’s meant to be a “real world” stress test. You are welcome to download the source files, investigate, and even add your engine of choice.

        FAQ

        1. 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.
        2. How do I install the class? Do I have to import it on every frame?Please refer to the "getting started" page.
        3. Can I set up a sequence of tweens so that they occur one after the other?Of course! That's precisely what TimelineLite and TimelineMax are for. But if file size is a big concern and you don't need all the fancy extras those tools offer, you could just use the delay property in TweenLite. Here's an example where we fade a MovieClip to an alpha of 0.5 over the course of 2 seconds, and then move it to a y coordinate of 300 over the course of 1 second:[as3]import com.greensock.TweenLite;
          TweenLite.to(mc, 2, {alpha:0.5});
          TweenLite.to(mc, 1, {y:300, delay:2});[/as3]
        4. Do the properties have to be in a specific order?Nope. So TweenLite.to(mc, 1, {x:100, y:200, alpha:0.5}) is the same as TweenLite.to(mc, 1, {alpha:0.5, y:200, x:100});
        5. 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 updateTo(), timeScale, repeat, repeatDelay, etc. so TweenLite is perfectly sufficient. TweenLite prioritizes efficiency and 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.
        6. Is there a way I can get code hinting and strict datatyping in the vars object I pass to TweenLite/TweenMax?Sure, the TweenLiteVars class does exactly that.
        7. 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 multiple end users are charged a usage/access/license fee of any kind, 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://www.greensock.com/club/ for details. Club GreenSock members get several nifty bonus plugins, classes, update notifications, SVN access, and more. Your donations keep this project going. Please see the licensing page for details on licensing.

        Need help?

        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.