GreenSock Tweening Platform v11 Released

After hundreds of development hours, countless caffine-fueled late nights, and a level of preoccupation with tweening that borders on obsessive-compulsive, version 11 is born. This is no minor update. It is by far the most significant (and extensive) upgrade ever.

If you've grown to love version 10 and get nervous at the thought of "extensive changes", don't worry. With a few minor exceptions, TweenLite and TweenMax work exactly the way they always have - they're just faster and more capable now. Once you dig into version 11, you'll love it. Trust me. If you haven't done so already, watch the 60-second promo swf on the home page; it demonstrates some of the new capabilities in a fun way. To begin with, let's go over the enhancements:

TimelineLite and TimelineMax: sequencing made fun

TimelineLite and TimelineMax are brand new tools that act as containers for your tweens, allowing you to build and manage sequences and groups of tweens very easily. Think of them like virtual MovieClip timelines where you position individual tweens over the course of time. You can even nest timelines within timelines as deeply as you want. Add labels, skip around with gotoAndPlay() and gotoAndStop(), reverse(), pause(), resume(), and more. Even tween the timeline's currentTime or timeScale to fastforward/rewind. The append() and appendMultiple() methods make it easy to build sequences progressively and you have complete control over where your tweens are inserted into a timeline with insert() and insertMultiple(). Tweens can overlap as much as you want. Once you get the hang of TimelineLite/Max, I think you'll find that they open up entirely new possibilities. They replace TweenGroup which is now obsolete (once you start using them, you'll see why - they're far more powerful, flexible, and even lighter weight than TweenGroup).

Watch a video that explains the basics of working with TimelineLite and TimelineMax.

Just like the way TweenMax extends TweenLite, TimelineMax extends TimelineLite, using identical syntax and adding several useful (but non-essential) features like AS3 event dispatching, repeat, repeatDelay, addCallback(), getActive(), getLabelAfter(), getLabelBefore(), currentLabel, and more. Please see the TimelineLite or TimelineMax pages for details or check out the documentation here. Here's an interactive demo of TimelineMax:

TweenLite & TweenMax Improvements:

• TweenLite now has pause(), resume(), reverse(), play(), and restart() methods which it shares in common with all TweenCore classes (TweenMax, TimelineLite, and TimelineMax). This brings polymorphism to the platform in a very convenient way. So you can create a class variable, for example, and type it as a TweenCore and populate it with a TweenLite, TweenMax, TimelineLite, or TimelineMax and use common controls.
• "useFrames" is now officially supported. So to make a tween or timeline base its timing on frames instead of seconds, simply pass "useFrames:true" through the vars object. For example, to tween mc's x coordinate to 100 over the course of 30 frames, do TweenLite.to(mc, 30, {x:100, useFrames:true});
• Improved speed
• Full ASDoc documentation
• Associate any data with a particular tween using the new "data" special property.
• TweenMax has new fromTo() and allFromTo() methods which allow you to define the starting and ending values in a tween (or group of tweens).
• allTo() and allFrom() were moved to TweenMax and the stagger, onCompleteAll, and onCompleteParams are now function parameters instead of special properties in the vars object.
• invalidate() any TweenLite/Max or TimelineLite/Max to force a re-initialization. This can be very useful if you want to reuse/restart a tween/timeline without having it revert to its starting values.
• TweenLite has a "currentTime" property now, so it's easy to find out exactly how far along a TweenLite is and/or make it skip to a certain point.
• Added onReverseComplete callback (and event dispatching in TweenMax/TimelineMax) so that you can take action when a tween/timeline finishes returning to its beginning after having been reversed. Also added onRepeat callback to TweenMax and TimelineMax.
• New "transformMatrix" plugin allows you to tween a DisplayObject's/MovieClip's transform.matrix properties. Either use the normal a, b, c, d, tx, and ty properties or convenient x, y, scaleX, scaleY, skewX, skewY, and rotation values. Yes, that's right - you can easily skew a DisplayObject/MovieClip now!
• New "motionBlur" plugin applies a realistic directional blur based on the velocity and angle of a DisplayObject's x/y movement. See an interactive demo in the updated Plugin Explorer (below). MotionBlurPlugin is a membership benefit of Club GreenSock for all "Really Green", "Shockingly Green", and corporate members.
• New "physics2D" plugin delivers simple physics functionality for tweening a DisplayObject's x and y coordinates based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction. See an interactive demo in the updated Plugin Explorer. Physics2DPlugin is a membership benefit of Club GreenSock for all "Really Green", "Shockingly Green", and corporate members.
• New "physicsProps" plugin delivers simple physics functionality for tweening any property of any object using velocity, acceleration, and/or friction. See an interactive demo in the updated Plugin Explorer. PhysicsPropsPlugin is a membership benefit of Club GreenSock for all "Really Green", "Shockingly Green", and corporate members.
• New "dynamicProps" plugin that allows you to associate a function with a property so that every time the tween is updated, it calls that function to get the end value for the associated property. You could, for example, tween an object's x/y coordinates to wherever the mouse is. See an interactive demo in the updated Plugin Explorer (below). DynamicPropsPlugin is a membership benefit of Club GreenSock, replacing ColorTransformPlugin which is now available to non club members.
• The AS3 flavor of TweenMax now has internal algorithms that can execute certain easing calculations 35-80% faster (overall speed boost is closer to 3-15%)! You just need to activate the eligible easing classes (options include Linear, Quad, Cubic, Quart, Quint, and Strong). Example: FastEase.activate([Strong, Linear, Quad]).

TweenNano: a ridiculously small (1.6k) engine

I would strongly recommend using TweenLite if there's any way you can afford the extra 3.1k, but if you're in a pinch and need the absolute smallest engine and you're willing to sacrifice some features, you can use the new freakishly small TweenNano engine. TweenNano instances cannot be placed into TimelineLite or TimelineMax instances, nor can they make use of any plugins and there are a few other tradeoffs, but it has many of the other features of TweenLite, uses the same syntax, and only costs 1.6k (2k in AS2). Get details here.

Important changes ("gotchas" to watch out for when switching from v10 to v11)

With the following exceptions, TweenLite and TweenMax should perform exactly the same as they did in v10:

• The base package changed from "gs" to "com.greensock" in order to comply with industry standards.
• No plugins are activated by default in TweenLite in order to minimize file size. Previously 7 plugins were activated by default (autoAlpha, visible, tint, frame, removeTint, volume, and endArray). It's VERY easy to activate whichever plugins you need, though. The Plugin Explorer will even write the code for you. Here is the activation code that you need to run once in your SWF for backward compatibility with plugins:
  PLAIN TEXT
  Actionscript:

  1. import com.greensock.plugins.*;
  2. TweenPlugin.activate([VolumePlugin, RemoveTintPlugin, FramePlugin, TintPlugin, AutoAlphaPlugin, EndArrayPlugin, VisiblePlugin]);

• The "loop" property in TweenMax has been changed to the more intuitive "repeat". "yoyo" can now be used in conjunction with "repeat" - it is a Boolean indicating how the repeat should behave.
• reverse() no longer acts as a toggle between forwards/backwards orientation in TweenMax. Instead, it ALWAYS forces the tween to go backwards.
• Changing the "reversed" property no longer automatically resumes/unpauses a TweenMax instance.
• The "renderOnStart" special property has been removed in favor of the new "immediateRender" (Boolean) special property which allows you to control whether or not the tween renders immediately when it is instantiated.
• TweenLite.removeTween() and TweenMax.removeTween() have been removed in favor of a common kill() method. So what used to be TweenLite.removeTween(myTween) is now simply myTween.kill().
• TweenMax's "progress" property is now "currentProgress"
• The AUTO overwrite mode now kills a tween if there are no more properties left tweening.
• OverwriteManager's ALL mode has been renamed ALL_IMMEDIATE, but it uses the same constant value (1) and produces the same results.

Thanks

I'd like to extend a special thanks to all who contributed their valuable input, particularly Grant Skinner who generously carved time out of his busy schedule to serve as an advisor. And a special shout out to Moses Gunesch and Zeh Fernando - two guys who have been very kind and supportive as well. You each inspire me in unique ways.

FAQ

1. TweenLite is about 1.9k fatter. What's up with that?
   Yes, as most of you know, I'm extremely protective of file size so I didn't take that 1.9k lightly. However, I felt strongly that the flexibility and speed improvements along with all the extra features, particularly pause(), resume(), reverse(), play(), and restart() in TweenLite, the polymorphism it delivers across the platform, and the useFrames feature justified the added weight. The base TweenLite class is now around 4.7k. If you need a SUPER small tweening class and don't mind giving up features, check out the new TweenNano which is only 1.6k in AS3. But I'd strongly recommend sticking with TweenLite. It provides a ton of flexibility, power, and speed for its size.
2. I don't want to use v11 - can I get a legacy copy of v10?
   Sure. But I do not plan to update previous versions. v10 was very stable and you can get it here: Download AS2 | Download AS3
3. motionBlur, physics2D, physicsProps, and dynamicProps don't work! How can I make them work?
   These plugins are membership benefits of Club GreenSock. When you sign up, you get the bonus plugins, and then don't forget to activate them. See the Plugin Explorer for the activation code.
4. Is TweenGroup being deprecated?
   Yes. Since TimelineLite and TimelineMax provide similar functionality plus a whole lot more flexibility and power (using less kb), it seemed logical. If you used TweenGroup.allTo() and TweenGroup.allFrom(), don't worry - they've been added back to TweenMax.
5. 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. 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.