Announcing GreenSock Animation Platform (GSAP) v12, now with tangy JavaScript flavor!

Version 12 not only brings more tweenable goodness than ever to Flash, but for the first time ever it does the same for JavaScript too. That’s right. You can use the same animation toolset for your Flash and HTML5 projects. Same API, same user-friendliness, and the same focus on performance and a robust feature set. If you’re a Flash developer, this destroys one of the barriers keeping you from feeling comfortable with HTML5. If you’re a JavaScript developer, this should make advanced animation tasks much simpler and more performant. In fact, it could revolutionize your animation workflow.

Latest news:

• JS version 1.9.7 released
• Video: Sequence JavaScript Animations Like a Pro with GSAP’s TimelineLite – don’t miss this video that demonstrates how TimelineLite can save you a lot of time.
• jQuery.animate() with GSAP! A new jquery.gsap.js plugin is released.
• 3D transforms & more CSS3 goodies arrive in GSAP JS
• Cage matches: CSS3 Transitions vs GSAP | jQuery vs GSAP

Before we dive into what’s new in v12, let’s take a step back and consider the platform as a whole and why it might be worth using in the first place…

Crazy fast

Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any tweening engine worth its weight and GSAP outperforms old “industry standards” by literally 1000%+ under stress. What was jerky and twitchy is now fluid. It’s the result of countless optimizations made to ensure that your interactive projects are responsive, efficient, and buttery smooth. Check out the speed test for a head-to-head comparison.

Freakishly robust

Built for professionals, GSAP is packed with features that make most other engines look like cheap toys. Animate colors, beziers, css properties, Flash filters, arrays, and lots more. Round values, smoothly reverse() on the fly, use relative values, automatically detect and accommodate getter/setter functions, employ virtually any easing equation, and manage conflicting tweens like a pro. Define various types of callbacks, tween in seconds or frames, build sequences effortlessly (even with overlapping tweens), repeat/yoyo and more.

Compatible

Flash, HTML5, jQuery, Canvas, CSS, new browsers, old browsers, RequireJS, EaselJS, mobile, and more – GSAP gets along with them famously. Use your favorite tools without jumping through endless hoops to ensure compatibility. The JS flavor even accommodates various transforms (scale, skew, rotation, x, and y) in modern day browsers plus IE back to version 6 without requiring clunky browser prefixes and hacks. We worry about compatibility so that you don’t need to. Another headache solved.

JavaScript, AS3, and AS2

Jump back and forth between Flash and JavaScript/HTML5 projects without giving up your favorite animation tools. No more wrestling with lackluster JavaScript capabilities or cumbersome APIs. This brings the fun back to scripted animation.

Lightweight & expandable

Modular, flexible, and ultra-efficient, its plugin architecture keeps the core engine tight while allowing virtually any feature to be added via optional plugins. TweenLite packs an amazing amount of power into a surprisingly small package (under 7kb in all flavors).

No dependencies

The GreenSock Animation Platform isn’t built on top of any 3rd party tools like jQuery (although it works great with jQuery as a selector). This approach minimizes load times and maximizes performance.

Advanced sequencing

You’re not limited to “one-after-the-other” sequencing; have animations overlap as much as you want. Nest timelines inside other timelines. Insert gaps, callbacks, labels, staggered tweens, and more. You get precise control over timing and unprecedented flexibility to create expressive animations with minimal code.

Dedicated support

Everybody needs a little help sometimes. We’ve got your back. When deadlines are looming and you can’t figure something out, hop over to http://forums.greensock.com to get your GreenSock-related questions answered in the forums. With a proven track record of active participation by the author and an army of fellow users, GreenSock tools are unlike most open source projects that stagnate or offer zero support.

Animate anything

That’s right. Anything. No predefined list of properties to choose from. Any numeric property of any object can be tweened, and if the property needs special handling (like colors, filters, non-numeric values, etc.), chances are there’s a plugin that will do it. If not, one can be created. The possibilities are endless.

Overwrite management

Another rarity among animation engines is the process of identifying conflicting tweens and handling them elegantly. This all happens automatically under the hood in GSAP, plus there are some advanced options if the default behavior isn’t what you prefer. GSAP protects you from conflicts that cause other engines to become frustratingly glitchy.

Learn fast

Frameworks are a dime-a-dozen, but precious few offer solid documentation, tutorials, interactive examples, a detailed “getting started” guide, and dedicated forums. You don’t have to be a genius to get up and running. There are plenty of resources here to guide you.

Permissive license

Completely free for everything except a very specific type of commercial use (reselling to multiple customers), GreenSock’s license makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform. This unique licensing model is a key component of that sustainability. Learn more about licensing.

What exactly is it?

The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:

• TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or BlurFilterPlugin for animating BlurFilters in Flash, etc.)
• TweenMax: think of it like TweenLite’s beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, updateTo(), etc. It automatically activates many common plugins for you too. The focus is on being full-featured rather than lightweight.
• TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.
• TimelineMax: extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), and many more. Again, just like TweenMax does for TweenLite, TimelineMax aims to be the ultimate full-featured tool rather than lightweight.
• Extras like easing tools, motion paths, plugins, blitting tools, and more

Dive in

Currently v12 is considered a beta release although there are no known bugs (knock on wood) and it is actively being used by business-critical sites/apps with great results. We have locked down the API and are only working to build out a few extra tools now and do a little more testing on CSSPlugin for JS before we “officially” launch.

Download the code

Visit the dedicated JavaScript page

Read the Getting Started with JavaScript Guide

JavaScript speed comparison: see how much better TweenLite performs under pressure than other industry standards like jQuery, MooTools, YUI, and Zepto.

Full documentation: every property and method has been documented. The docs are available in the downloads and online [ ActionScript | JavaScript ].

Get help in the forums.

What’s new?

In addition to the brand new JavaScript flavor, there are plenty of other enhancements to the ActionScript version that the Flash community can get excited about. If you’ve never used TweenLite or TweenMax before, you can skip this section altogether.

One of the goals of this release was improving ease of use, particularly with sequencing and working with arrays. The API is less restrictive and things just work. You can now tween arrays of objects with a single tween. You can pass arrays to killTweensOf(). You can pass callbacks, labels, tweens or arrays to the add() timeline method (which replaces append(), insert(), appendMultiple() and insertMultiple()). There are new convenience methods that make sequencing much more concise. You can accomplish the same tasks with literally 50% less code in many cases. There are scores of little improvements that make it even more enjoyable to use.

As always, performance is a huge priority. All of the easing methods have been further optimized and there are many under-the-hood refinements that ensure blazing fast speed. In general, performance was prioritized over small file size except in TweenNano where file size is of paramount importance.

1. The entire engine has been made more array-friendly.

   //notice the target is an array
   TweenLite.to([mc1, mc2, mc3], 1, {alpha:0});
   
   var tl:TimelineLite = new TimelineLite();
   //previously only appendMultiple() and insertMultiple() handled arrays. The new add() method combines the functionality of append(), insert(), appendMultiple() and insertMultiple()
   tl.add( [tween1, tween2, tween3] );
   
   //kill all tweens of mc1, mc2, and/or mc3
   TweenLite.killTweensOf([mc1, mc2, mc3]);

2. You can tween function-based values, not just properties. For example, if you have a width() method that is used for both getting and setting (when no parameters are passed in it acts as a getter, and when a parameter is passed it acts as a setter).

   var curWidth:Number = myObject.width(); //gets
   myObject.width( curWidth + 10 ); //sets
   TweenLite.to(myObject, 1, {width:300}); //tweens

   The engine even recognizes “get” and “set” methods automatically, so for example, if your object has getCustomProp() and setCustomProp() methods, you can tween the value like this:

   TweenLite.to(myObject, 1, {setCustomProp:10});

   TweenLite will see that it’s a function and swap out “set” for “get” in the method name to get the starting value. This also works for methods that don’t have “get”/”set” in the name like jQuery-style methods (width(), height(), etc.)

3. There’s a new SlowMo ease that makes it much easier to create a slow-motion effect. For example, you could have text fly in quickly, decelerate and then move at a linear pace before accelerating out of frame. Previously you could sequence 3 tweens (an easeOut, then Linear.easeNone, then easeIn), but the eases didn’t transition smoothly (you’d see a sudden shift in pace at the joints). The new SlowMo ease can be configured easily. Control the proportion of the tween that moves things in a linear fashion (like 0.5 if you want half of the tween to be linear, 0.8 for 80%, etc.) as well as the strength of the ease in/out. Here is an interactive example, courtesy of Carl Schooff:

   Carl did a fantastic job demonstrating and explaining SlowMo in his video at snorkl.tv. I highly recommend checking it out.

4. To make sequencing less verbose, convenience methods were added to TimelineLite and TimelineMax that append TweenLite instances using a shorter syntax. You can chain things together too.

   //OLD (still works, but is deprecated):
   var tl:TimelineLite = new TimelineLite();
   tl.append( TweenLite.to(mc, 1, {x:100}) );
   tl.append( TweenLite.from(mc, 1, {y:-100}), 0.5);
   tl.appendMultiple( TweenMax.staggerTo([mc1, mc2], 1, {alpha:0}, 0.2) );
   
   //NEW:
   var tl:TimelineLite = new TimelineLite();
   tl.to(mc, 1, {x:100})
     .from(mc, 1, {y:-100}, "+=0.5")
     .staggerTo([mc1, mc2], 1, {alpha:0}, 0.2);

   Methods that were added are: to(), from(), fromTo(), staggerTo(), staggerFrom(), staggerFromTo(), call(), and set().

5. You can now add global “tick” event listeners that call your own method(s) immediately after all the tweens/timelines update (on each frame).

   TweenLite.ticker.addEventListener("tick", myMethod);

   This can be a boon for games that want to run certain logic after each refresh.

6. OverwriteManager’s functionality is now baked into TweenLite, whose new default mode is “auto” (just like TweenMax). In 98% of the scenarios, this is what people preferred anyway. (Previously TweenLite’s default mode was “all” which killed all tweens of the same target immediately.) You no longer need to call OverwriteManager.init(). There is no OverwriteManager now. Overwrite modes are defined using Strings (although legacy code will still work with integers or booleans). An example of the new syntax is: TweenLite.to(mc, 1, {x:100, overwrite:"all"}); but again, “auto” mode is the new default. You can even change the default using the static .defaultOverwrite property.
7. There’s a new TweenLite.fromTo() method that allows you to define both the starting and ending values (previously only TweenMax had a fromTo() method.)
8. Most methods return the instance itself so that you can chain them if you want. Like:

   //chain as much as you want
   myTimeline.add( ... ).add( ... ).timeScale( ... );

9. Completely rewritten BezierPlugin with a vastly improved proprietary algorithm for drawing Beziers through an array of points/values naturally (even define a “curviness” value), a new “timeResolution” feature that ensures your object moves along the Bezier with the appropriate timing, and more accurate “autoRotate” (previously called orientToBezier) functionality. Plus you can pass in regular cubic or quadratic Bezier values if you prefer. Even use the static BezierPlugin.bezierThrough() method to have the plugin calculate the anchors and control points through the values you provide in either cubic or quadratic format so that you can, for example, draw the lines yourself using Flash’s graphics API or a <canvas> element. Ultimate control and freedom. Click on the “EXAMPLE” button next to “bezier” in the Plugin Explorer below to play with the new options interactively and see the sample code:
10. You can now self-reference the tween/timeline in the onCompleteParams, onUpdateParams, onStartParams, onReverseCompleteParams, or onRepeatParams using the special keyword “{self}”. For example:

    TweenLite.to(mc, 1, {x:100, onUpdate:reportTime, onUpdateParams:["{self}"]});
    function reportTime(tween) {
        trace("time: " + tween.time() + ", target: " + tween.target);
    }

    This works with all callbacks in TweenLite, TweenMax, TimelineLite, and TimelineMax.

A note to those updating legacy ActionScript code

With thousands of developers relying on the GreenSock Animation Platform, backwards compatibility is definitely something we strive to maintain. However, in some rare cases the benefits of changing part of the API for a greater purpose looking forward trumps backward compatibility. In most cases, you should be able to swap v12 in for v11 and everything will work great, but there are a few exceptions which are flagged in the expanded list above with a caution icon (). Don’t forget to expand the list so that you can see all 40 items.

FAQ (click to view answer)

1. Where can I report a bug, feature request, or rave about my tweening adventures with v12?
   In the “v12 beta” forum.
2. Is v11 dead? Should I switch to v12 now or wait until it’s out of beta?
   Version 11.x will continue to be available while v12 is in public beta, but all the momentum is behind v12 and it will supplant v11 soon, so it’s a good idea to transition at your earliest convenience (maybe as you begin your next project).
3. How much have the ActionScript file sizes changed?
   With all the new features and speed optimizations, there was a file size cost but it wasn’t outrageous. TweenNano grew by about 0.5 kb in AS3 (to about 2kb total). TweenLite grew by about 1.7kb (compressed) but keep in mind that it includes OverwriteManager’s capabilities (which used to be a separate 1kb) plus array tweening, fromTo(), getTweensOf(), and many of the standard easing equations built-in. TimelineLite was streamlined a bit, so if you were using TweenLite and TimelineLite in your project, the total increase in file size in v12 is only 0.9kb. TweenMax has increased by less than 1kb.
4. Can I use my old v11 plugins?
   There were some changes necessary in the plugin architecture, so all of the plugins have been updated for compatibility. You cannot use old plugins with v12.
5. Can I use jQuery with the the GreenSock Animation Platform?
   Absolutely! jQuery is great for selecting DOM elements, adding event handlers, and lots more. GSAP treats jQuery objects like arrays, so you can pass a single jQuery object as the target of the tweenor (as of 1.8.0), you can even pass a string of selector text as the target and if jQuery is loaded, GSAP will use it as the selector! For example:

   //fade out all of the elements with the class "myClass"
   TweenLite.to($(".myClass"), 1, {opacity:0});
   
   //tween the width of the element with id "myElement" to 500px
   TweenLite.to("#myElement", 1, {width:"500px", ease:Elastic.easeOut});
   
   //tween the "marginTop" of all objects of the class "myClass" in a staggered fashion so that they appear to fall into place from 100px up
   var tl = new TimelineLite();
   tl.staggerFrom(".myClass", 1, {marginTop:"-=100px", opacity:0}, 0.1);
   
   //or use jQuery's each() method to loop through the results and stagger a fade out
   $(".myClass").each( function(index, element) {
       TweenLite.to( element, 1, {autoAlpha:0, delay:index * 0.2});
   });
   
   //add a click handler that uses $(this) to refer to the menu element that was clicked and tween its height to 100px
   $("#menu").click(
        function(){
   		TweenLite.to( $(this), 0.7, {height:"100px", ease:Power2.easeInOut } );
        }
   );

   Of course you need to load jQuery into your HTML document in order to use it. TweenLite doesn’t have any dependencies on 3rd party tools like jQuery, so it is completely optional.

6. Which browsers work with the JavaScript version of GSAP?
   GSAP itself is pure JavaScript and should work in virtually ALL browsers. The CSSPlugin tweens css-related values and its compatibility is based on which properties you use in your tweens. GSAP wasn’t intended to solve all browser incompatibilities, but it does implement wizardry for critical features like opacity, transforms (rotation, scaleX, scaleY, skewX, skewY, x, and y), and transformOrigin so those should work in all major browsers even back to IE6. Firefox doesn’t support backgroundPositionX or backgroundPositionY, so those specific properties won’t work but backgroundPosition will for virtually all browsers. There is NOT a predetermined list of css properties that you can tween – the platform will attempt to tween ANY property you pass in. If it is numeric, it will tween it. If it isn’t numeric and it isn’t a recognized special property, CSSPlugin will just set the property to the value you provide (without tweening it). So, for example, if you try to tween to display:"inline", that isn’t a tweenable property but it will still be set accordingly during the tween, so feel free to use that to your advantage.
7. How big are the JavaScript files?
   Here are the minified gzipped file sizes:

   • TweenLite (includes standard eases): 6.9kb (20.4kb without gzip)
   • CSSPlugin: 10.6kb (26.5kb without gzip)
   • RoundPropsPlugin: 0.5kb (1kb without gzip)
   • BezierPlugin: 3.6kb (7.8kb without gzip)
   • EasePack: 1.2kb (3.6kb without gzip)
   • TimelineLite: 2.8kb (8.8kb without gzip)
   • TimelineMax (includes TimelineLite): 4.4kb (15.6kb without gzip)
   • TweenMax (includes ALL of the above): 27.1kb (81.7kb without gzip)
8. Can I use the JavaScript version for canvas objects or 3rd party tools like EaselJS? Is it only for animating DOM elements?
   You can animate ANY numeric property of ANY JavaScript object – it’s not just for DOM elements. So yes, you can animate canvas objects, EaselJS assets, and pretty much anything JavaScript-related. If you need to run logic after each refresh (like to redraw things on the canvas), either use an onUpdate on the individual tween/timeline or add a “tick” event listener to the core Ticker that drives the platform.
9. Does the JavaScript version use CSS3 transitions to deliver even better performance (with help from the GPU)?
   Unfortunately CSS3 transitions have some significant limitations that make them unworkable for a serious animation platform. They don’t provide precise controls over the timing or easing. They’re great for simple effects but the GreenSock Animation Platform delivers extremely precise rendering, so you can do things like pause() and reverse() an animation anytime or skip to a specific time and play from there, etc. Try creating a CSS3 transition that uses an Elastic.easeOut or SlowMo.ease and then jump to 0.72494-seconds into a 2-second transition and pause() only to resume() later. It’s impossible from what I understand. So no, the platform doesn’t make use of CSS3 transitions. However, it is highly optimized for performance. See the CSS3 transitions vs GSAP cage match for a detailed comparison.
10. Do I need to worry about garabage collection? What happens when a tween finishes?
    No need to worry. Tweens and timelines are automatically made eligible for garbage collection when appropriate (typically when they finish but if you maintain a reference to an instance so that you can restart it later, for example, it won’t be gc’d out from under you). Basically the system manages gc for you and generally cleans up after itself.
11. Does the GSAP use the newer “requestAnimationFrame” API for its timing mechanism to maximize performance and minimize CPU load?
    Yes indeed, although it falls back to a standard setTimeout() if the browser doesn’t support requestAnimationFrame. And if you prefer not to use requestAnimationFrame, you can disable it by calling TweenLite.ticker.useRAF(false). The main benefit of requestAnimationFrame is that it synchronizes animation renders with modern browsers’ redraw cycles and it also reduces the frequency of updates significantly when the user switches to another tab in the browser, reducing the load on the processor and saving battery on mobile devices.
12. Are more plugins coming for JS? The Flash version seems to have a lot more than the JS version.
    Yes, you can expect to see more plugins coming in the future.
13. Do I have to purchase a license to use this code? Can I use it in commercial projects?
    GreenSock uses a very permissive license that allows you to use the tools for free for everything except a very specific type of commercial use (if you collect a fee from multiple customers for the same app/product/site that uses GreenSock tools) which makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform. This unique licensing model is a key component of that sustainability. If multiple customers 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. Click here for details. Joining the club also gets you members-only bonus plugins, classes, update notifications, and more. Please see the licensing page for details.

Comments (103)

Subscribe