Why GSAP for HTML5 Animation?

Feature lists are nice, but they can get lengthy and they don’t always tell the story in a way that’s relevant to you as the developer or designer in the trenches, trying to get real work done for real clients. You hear plenty of marketing fluff about theoretical benefits of CSS animations or some whiz-bang jQuery plugin that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is horribly cumbersome or there are all sorts of “gotchas”. You need things to “just work”.

Why GSAP?
Performance
Compatibility
Other tools fall down in older browsers, but GSAP is remarkably compatible.
Scale, rotate & move independently
(impossible with CSS animations/transitions)
XNJYHQLJYQEW
CSS, canvas libraries, colors, beziers, etc.
Total control
pause(), play(), reverse(), or timeScale() any tween or sequence.
The new standard
for HTML5 animation
replay

The animation above uses GSAP to animate css properties of DOM elements (no canvas). Try recreating it using CSS animations or any other framework. It would be a nightmare (and likely impossible). It illustrates why people are switching to GSAP in droves. Here are a few of the practical, real-world reasons (click items to expand):

Squash jerky animation (performance)

See the speed comparison for yourself. GSAP is literally up to 20x faster than jQuery. GSAP is the fastest full-featured scripted animation tool on the planet. It’s even faster than CSS3 animations and transitions in many cases. Get buttery smooth 60fps requestAnimationFrame-driven synchronized animations.

Solve browser compatibility issues

  • Don’t fret about browser prefixes or property inconsistencies more…
    Nobody likes dealing with browser prefixes for things like transforms, boxShadow, textShadow, borderRadius, etc. or finding out that IE, for example, splits apart backgroundPosition values into non-standard backgroundPositionX and backgroundPositionY properties. Looking up current values is done in a completely different way too. GSAP smooths things out and allows developers to use a standard syntax.
  • Avoid browser bugs more…
    GSAP works around scores of browser bugs. For example, if you try to animate 3D transforms in Firefox, objects will flicker in many cases. iOS Safari sometimes stops dispatching requestAnimationFrame events in certain scenarios which would cause other engines to completely break. If you don’t set a zIndex, iOS won’t render transforms correctly in some scenarios, and there’s a major bug in Safari’s 3D transformOrigin behavior. GSAP implements workarounds under the hood, so things “just work”. Again, you write clean code and let GSAP juggle the tough stuff.
  • IE8 headaches solved, including 2D transforms more…
    GSAP is the only tool available that has solved the problem of doing rotation, scaling, skewing, and x/y translation in IE8 (even back to IE6) including transformOrigin functionality. That means developers can write clean code and let GSAP worry about all the fancy footwork necessary to make things work in older versions of IE. The same goes for opacity which must utilize an IE-specific filter for IE8 and earlier.
  • CSS3 transitions & animations don’t work in IE9; GSAP does more…
    People can talk all they want about theoretical benefits of CSS3 animations/transitions but in the real world, clients need things to actually work in IE9 and maybe even IE8. As much as we hate it, these browsers will be around for a while. GSAP delivers the compatibility you need. See the cage match for a detailed comparison between GSAP and CSS3 transitions/animations.
  • Unsupported properties silently fail more…
    Some browsers simply can’t support certain css features (like 3D or boxShadow in IE8). Instead of throwing errors that halt JS execution, GSAP ignores attempts to animate unsupported properties. You don’t need to write all sorts of conditional logic just to prevent errors.

Scale, rotate, skew, and move without the headaches

  • Animate each property distinctly (impossible with CSS3 animations/transitions) more…
    Transforms are some of the most common properties to animate, but they’re all lumped into one “transform” CSS3 property, making them almost impossible to manage distinctly. For example, what if you want to animate “rotation” and “scale” independently, with different timings and eases? This type of thing is incredibly common for animators, but it’s impossible with most other systems including native CSS3 transitions/animations. GSAP can handle animating scaleX, scaleY, skewX, skewY, rotation, rotationX, rotationY, x, y, and z. You can also use 2D or 3D transformOrigin values. IE9 (and earlier) doesn’t support 3D transforms but 2D works great.
  • Directional rotation (clockwise, counter-clockwise, or shortest) more…
    GSAP is the only system that makes it simple to do directional rotation. For example, let’s say you want to rotate to a particular value but you want it to go in the clockwise direction, or maybe counter-clockwise, or automatically choose the shortest path? With GSAP, you can add a “_cw” (clockwise), “_ccw” (counter-clockwise), or “_short” (whichever is shortest) suffix and it handles things for you.
  • 3D transforms work in modern browsers, 2D works back to IE6! more…
    You don’t need to apologize to your clients anymore, trying to explain why your cool animations break in IE8 and earlier. GSAP just works. In IE8 and earlier, an IE-specific filter is used (along with a bunch of math) to make 2D transforms work.

Animate anything

  • DOM elements? Canvas libary objects? Generic JS objects? No problem more…
    jQuery and CSS3 animations/transitions only handle DOM elements, but what if you need to animate canvas library elements, like those from KineticJS or EaselJS? What if you create your own objects and need to animate their properties or methods? Do you really want to have to switch toolsets and learn something completely new with a different animation syntax? Wouldn’t it be nice if your code and toolset could be consistent? No other library handles such a wide variety of targets – GSAP can animate anything JavaScript can touch.
  • Colors, complex values like boxShadow, and almost any css property more…
    Most other tools only support a subset of css properties. jQuery doesn’t do colors unless you add a plugin. Another plugin is needed for transforms, and yet another for things like boxShadow or textShadow. And how about multiple textShadows? No luck. GSAP allows you to define your css values in the same format you normally would in regular css and it handles the interpolation and browser differences for you. For example, backgroundColor could be “#F00″ or “red” or hsl(0,100%,50%) or “#FF0000″ or “rgb(255,0,0)”. And boxShadow could be “10px 10px black” or “50px 50px 20px black” or “50px 50px 50px 20px blue”.
  • Properties or methods more…
    In addition to regular properties (like yourObject.prop), GSAP can also handle method-based getters/setters (like yourObject.prop() getter and yourObject.prop(value) setter), using the same syntax. It automatically senses whether it’s a property or method and handles it accordingly.
  • Interpolate units more…
    Animating a %-based width to px? No problem. How about em to %? GSAP handles conversion for you internally. Same for color values in various formats.
  • Animate a single object, arrays, or selector objects containing any number of elements more…
    Pass almost anything to GSAP as the target, and it’ll figure out how to handle it. Got an array of 100 elements? No problem. A jQuery object with 12 elements? Sure. You don’t need to loop through them yourself and create a bunch of tweens. And if you pass selector text as the target, it’ll feed it to jQuery or the selector engine of your choice automatically or it’ll fall back to document.getElementById() if no selector is available. Again, it “just works”.

Easy workflow, refined tools, total control

This is a major difference that most people don’t even realize until they spend some time with GSAP – it’s like when smart phones first came out and nobody realized how limited their “dumb phones” were until they saw what was possible with new technology.

  • Unparalleled sequencing (pardon the pun) more…
    In GSAP, you can chain sequences together in no time, even with overlaps and/or gaps (most systems only accommodate one-after-the-other sequencing with no overlaps or everything runs in parallel) and then control the whole thing as a single instance. GSAP’s timeline classes deliver unprecedented control. Nobody even comes close. See a video here that shows how this can have a big effect on your workflow.
  • Polymorphism, object-oriented architecture, and nesting more…
    All of the tween and timeline classes extend a common “Animation” class, so they share common methods like pause(), resume(), reverse(), restart(), play(), seek(), and even timeScale(). That’s a big deal workflow-wise because you can write methods that spit back any animation (a tween or timeline) that can get nested into another timeline which can also be nested, etc. There’s no limit. Then you can control that master timeline very easily and everything remains perfectly synchronized. This allows modularized code that is much easier to maintain.
  • Repeat, yoyo, restart(), seek(), reverse() entire sequences on the fly more…
    You have complete control over the animation at runtime. You can build an entire banner ad, for example, tuck it in a TimelineMax and set it to repeat a certain number of times or indefinitely. The seek() method can be great during production because if you’re building a lengthy animation, you can add a seek() call to jump to the spot you’re working on so that you don’t have to keep watching the first part over and over again while you’re tweaking timings toward the end. Then remove that seek() call when you want it to run from the beginning.
  • Exclusive easing more…
    All of the standard easing options are available in GSAP, plus some exclusive ones as well like SlowMo, RoughEase, and SteppedEase which are completely configurable, giving you just the “feel” that you want.
  • Rich callback system more…
    It’s pretty common for other frameworks to only offer an onComplete callback, but GSAP also offers onStart, onUpdate, onRepeat, and onReverseComplete. You can even pass any number of parameters, including a self-reference to the tween itself using “{self}”. Add any of these callbacks to timelines too so that they run after all child tweens are done rendering.
  • Animate along Bezier paths with auto rotation, do momentum-based animation, physics, and other advanced effects more…
    Plugins are available that make some very advanced effects simple. BezierPlugin will even allow you to feed it some points and it’ll draw a smooth Bezier through those points and then animate your object along that path. ThrowPropsPlugin is great for things like flick-scrolling, complete with smooth handling of boundaries, elegant bounce-back, automatic velocity tracking, and more.
  • Animate className, morphing between classes like css transitions more…
    GSAP will automatically analyze all css properties, identify any diffences, and animate just those values. You can even add or remove classes using the “+=” and “-=” prefixes.
  • Relative values using “+=” and “-=” prefixes more…
    Instead of defining an absolute end value for your tween, you can make it relative to whatever it is when the tween starts. For example, top:”+=100″ would add 100 to whatever “top” is when the tween starts.
  • Intelligent overwriting, gc management, and more more…
    Want to kill all tweens of a particular object? Easy. How about killing individual portions of a tween (like just the “rotation”, but let the “scale” keep animating)? No problem. Intelligent overwriting with various modes to choose from? Of course. Automatic garbage collection management? You betcha. An architecture that keeps the timing of every tween perfectly synchronized with the others? Yep. How about repeats that don’t suffer time slips from gaps that build up like in other systems. Check. A global ticker that you can tap into for running your own logic on each frame? Sure. There are all sorts of little features and refinements that came from years of usage in the trenches that other engines don’t address.

Fast load times

  • Zero dependencies more…
    GSAP works great with jQuery, but doesn’t depend on it at all. It’ll integrate nicely with Angular, Zepto, Sizzle, or virtually any other framework. In fact, there’s even a jQuery plugin that’ll hijack any of your jQuery.animate() calls and use GSAP under the hood in order to boost performance and add a bunch of features to your jQuery-based project.
  • Lightweight & modular more…
    TweenLite may be all you need, and it’s around 7kb gzipped and minified. Add CSSPlugin (around 12kb) to empower animation of css properties, and EasePack (less than 2kb) for extra eases. Load other plugins for extra capabilities, TimelineLite or TimelineMax for advanced sequencing, or load TweenMax to get all the essentials plus a bunch of plugins and the timeline classes all in one convenient file that’s a little over 20kb gzipped & minified. Specialty features are tucked into plugins so you can pick and choose which ones you need for your project and load only those.
  • Robust CDN Delivery more…
    GSAP is hosted on the CDNJS CDN network, so you can get excellent load times and leverage browser caching. The more sites that use the CDN files, the more everyone will benefit. Imagine if the banner ad networks standardized on GSAP – not only would everything load faster because it’d be cached so pervasively, but they could choose not to count GSAP’s file size against the banner ad’s cap which would be a huge win for banner ad creators. Or at least it could be a competitive advantage for the networks who adopt that policy.
  • Less code more…
    “But wait,” you may say, “CSS animations and transitions don’t require any js files, so aren’t they better for load times?” In some cases when you’re not doing much animation, yes, although you give up a lot in terms of compatibility and workflow. But CSS animations are far more verbose, so the file size advantage shifts quickly back to GSAP the more animation you do. Look at the example on the transitions cage match page where the css animations code is literally 50 times longer than the GSAP code that does the same thing. The other thing to keep in mind is that GSAP’s JS file(s) are typically cached by the browser, so the savings page-to-page is much larger since the code you write on each page is far more concise. In other words, think of how much js/css the browser must actually request from the server over the course of your users’ multi-page visit to your site.

Get help when you need it

GreenSock has paid staff manning the forums, along with a generous community of sharp developers pitching in to answer questions. Swing by and see how active things are in there. It’s very rare that any question goes unanswered. Most open source projects have no dedicated support whatsoever, or you need to pay very high fees to get support.

Knowledge transfer

GSAP has been a standard in the Flash community for years and there are scores of very talented animators well-trained as GSAP ninjas. Since the ActionScript version uses exactly the same syntax as the JavaScript flavor, their skills transfer to the HTML5 world great. They can get up and running fast. No need to learn a whole new API, as would be necessary with jQuery or CSS animations/transitions. If they still need to create banner ads in Flash and start building them in HTML5 as well (maybe using swfs as fallbacks), their animation workflow is buttery smooth regardless of the media.

Conclusion

GSAP was engineered and refined over the years by professional animators in the trenches with practical concerns in mind. It’s built to scale from simple fades to rich, immersive experiences packed with all sorts of animation. It’s not a throwaway one-trick-pony jQuery plugin that you toss into a project here and there; it’s built to give you a rock-solid animation workflow across all of your projects that require animation. The goal is to become the standard for scripted animation on the web. GSAP has been actively maintained and developed for years (even though the JavaScript flavor was introduced in early 2012), and there are no plans to stop. We’ve got lots of exciting things planned.

Recommended reading:

  • Twitter
  • Facebook
  • Digg
  • StumbleUpon
  • del.icio.us
  • Yahoo! Buzz
  • Google Bookmarks
  • RSS
  • LinkedIn
  • Reddit

Comments (8) RSS

Posted by Patrick on June 17, 2013

FIRST!
GSAP seminar!
KICKASS!

Posted by scott on June 18, 2013

will the seminar be available over the web for those of us unable to attend in person but who are still interested in seeing what is next for GSAP?

Posted by sean powell on June 18, 2013

I think I speak for a lot of developers that do a lot of interactive animated AS3 work when I say that we’ve been waiting for this to mature for a long time, and with this level of performance, support, and a very familiar and easy syntax for such smooth and powerful animation, this can really be the bridge for a lot of people stuck in AS3 to move over into HTML5 and finally produce a similar level of butter-smooth interactive UI/UX that we’ve grown to expect out of Flash using the GS packages. Flash performance from Adobe tweening never came close to Greensock, Tweener and other fell short in comparison, too, so I’m really not surprised to see this library beating the pants of jQuery and just about everything else out there.

Bravo!

Thanks Jack!

Posted by Chris McAndrew on June 18, 2013

Well done brother. You do not have to convince me. Thanks to this article, I am headed upstairs to do some TweenMax-ing. Keep it up and thank you.

Posted by Jack on June 18, 2013

Scott, the seminar won’t be a webcast, no, but we’re getting a lot of requests for that so we’ll definitely keep it in mind as we make future plans.

Posted by Tahir Ahmed on June 18, 2013

GSAP for the win! used it for years in ActionScript world and now enjoying its awesomeness in JavaScript. Much thanks for all your efforts.

- Tahir.

Posted by Richard Bagnall on September 12, 2013

GSAP looks awesome, but I noticed in IE10, running in IE8 mode, the scaling, rotating, green square in your banner demo doesn’t scale or rotate? Is it using a “disabled” 3d transform?

Posted by Jack on September 13, 2013

Thanks for mentioning that, Richard. Actually, IE10′s “simulation” IE8 is very inaccurate. If you view the page using “real” IE8, you’ll see that things animate nicely including scale and rotation. Of course the 3D flipping is ignored since IE8 doesn’t support 3D.

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

"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT
-----------------------------------------------------------------------------
PLAIN ENGLISH SUMMARY:

  1. You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See http://www.greensock.com/club/ for details.
  2. Use at your own risk. No warranties are offered.
  3. 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 code known as TweenLite, TweenMax, TweenNano, TimelineLite, TimelineMax, and other copyrighted code that is available for download at 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 apps, web sites, games, components and other software applications ("Developed Works") for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed Developed Work for which end users are charged a fee (either for usage or access), simply sign up for the appropriate "Business Green" Club GreenSock membership at http://www.greensock.com/club/.

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

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

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

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

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

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

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. You agree that GREENSOCK may identify you as a licensee unless you make a written request otherwise. GREENSOCK hereby grants to you the right to disclose that your product, game, software application, component, or other Developed Work makes use of GREENSOCK code (for example, "Powered by TweenLite").

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 $250. Notwithstanding anything else in this agreement, you agree to indemnify GREENSOCK, its assignees, and licensees, and hold each of them harmless from and against any and all claims, losses, damages, and expenses, including legal fees arising out of or resulting from any negligent act or omission by you.

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

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

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

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

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

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

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

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