Jump to content

Why GSAP for HTML5 Animation?

| GreenSock

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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 about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there frustrating "gotchas". You need things to just work.

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

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 GSAP has become a standard in the industry, why most award-winning sites use it, and why Google recommends GSAP for JavaScript animations. Over 8 million sites use GSAP! Here are a few of the practical, real-world reasons why (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 animations.

  • Exclusive lagSmoothing() feature automatically heals from CPU spikes while maintaining perfect synchronization.
    What happens when the CPU gets bogged down and there's a lag between renders? Most other animation engines (including CSS animations in some browsers) slide the start time forward to compensate but there's a major drawback to that approach: it sacrifices synchronization and can mangle delays so that when you try to neatly stagger animations, they spew out in clumps/groups. GSAP automatically implements lagSmoothing to heal from CPU spikes without those side effects. Read more.
  • Avoid layout thrashing
    Some browsers (notably Webkit) impose a performance penalty for sequential read/write/read/write of DOM-related properties, forcing a costly style recalculation for each cycle so it is better to group reading and then writing tasks (read/read/write/write is faster than read/write/read/write). GSAP takes special measures to solve these problems. Again, it's all automatic.
  • GPU acceleration, debouncing onscroll/onmove/ontouchmove, grouping updates, and many other optimizations.
    We obsess about performance optimizations so you don't have to. There are too many of these optimizations under the hood to list here, but hopefully you get the picture. Nothing is more sensitive to performance problems than animation especially on mobile devices, so make sure you choose a technology that minimizes the CPU load. GSAP delivers in spades.

Scale, rotate, skew, and move without the headaches

  • Animate each property distinctly (impossible with CSS3 animations/transitions)
    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, xPercent, yPercent, 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)
    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!
    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. Learn more about CSS3 features in GSAP.
  • Make SVG transforms work consistently across browsers (including transform-origin)
    Chrome, Firefox, IE, and Safari all handle CSS transforms (and transform-origin) applied to SVG elements in very different ways. So without GSAP the same rotation or scale animation would look completely different. GSAP does all the math behind the scenes to correctly apply the transform-origin and transform values so that you can animate SVG elements just like regular DOM elements. See Jack's guest post on css-tricks.com for details.

Animate anything

  • DOM elements? Canvas library objects? Generic JS objects? No problem.
    jQuery and CSS3 animations/transitions only handle DOM elements, but what if you need to animate canvas library elements, like those from PIXI.js 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.
  • You're not locked into building your whole UI in a highly opinionated, proprietary API.
    GSAP fits into just about any workflow. If you prefer to build using standard HTML/CSS/JS to leverage their strengths, fine. If you want to throw in a dash of canvas or use some 3rd party drawing/rendering library, no problem. GSAP stays out of your way, letting you sprinkle in animations wherever you want.
  • Colors, complex values like boxShadow, and almost any css property
    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
    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
    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
    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.querySelectorAll() 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.

  • Advanced playback controls and debugging with GSDevTools
    Get a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful.
  • Unparalleled sequencing (pardon the pun)
    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
    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.
  • Advanced staggering
    Advanced staggering makes it surprisingly simple to get rich, organic timing effects with very little code. Each tween's start time can be distributed according to any ease and/or based on how close each element is to a position in the list. For example, you can have things emanate outward from the "center" or a certain index. It'll even accommodate grids, complete with auto-calculated columns and rows (great for responsive layouts)!
  • Repeat, yoyo, restart(), seek(), reverse() entire sequences on the fly
    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.
  • Rich callback system
    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
    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
    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
    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
    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.

Custom Easing!

Imagine literally **any** easing curve, with as many control points as you want...that's what GSAP's CustomEase delivers. All of the standard easing options are available too, of course, plus some exclusive ones like ExpoScaleEase, SlowMo, RoughEase, CustomWiggle & CustomBounce and SteppedEase which are completely configurable, giving you just the "feel" that you want. See the unique Ease Visualizer for all the options.


Check out Draggable to see some of our most impressive work related to physics. Notice how smooth and natural the interaction is, and how you can impose boundaries, snapping, and even ensure that properties land on exact values or within ranges that you define. Flick, spin, or scroll, all with delightful responsiveness. This isn't limited to dragging, though - ThrowPropsPlugin lets you get this kind of incredible momentum-based animation on ANY property of ANY object.

Solve browser compatibility issues

  • Don't fret about browser prefixes or property inconsistencies
    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.
  • SVG quirks vanish
    When you start animating SVG, you'll quickly run into frustrating browser inconsistencies and bugs like transform-origin glitches, stroke-dasharray rendering oddities, and lots more...unless you're using GSAP which automatically works around many of those issues.
  • Avoid browser bugs
    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
    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
    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
    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.

Exclusive SVG wizardry (with cross-browser support)

No other animation tool supports SVG as well or as intuitively as GSAP. Neither CSS animations nor SVG's very own SMIL (soon to be deprecated by some browsers) deliver cross-browser support. Plus GSAP's powerful DrawSVGPlugin and MorphSVGPlugin open up a whole new world of SVG animation effects.

  • Morphing (shape tweening)
    MorphSVG allows you to morph any SVG <path> regardless of how many points are in the starting and ending paths. You will be blown away by the results
  • transformOrigin
    The way browsers handle transformOrigin (the point around which scale and rotation occur) is very different due to the SVG spec and its buggy implementation. GSAP normalizes behavior by allowing you to set transformOrigin in the exact same way you would with a DOM element and get the same results.
  • Animate SVG strokes
    DrawSVG gives you precise control over how SVG strokes are revealed. In addition to just making a stroke reveal from end to end, you can reveal from center and use any segment length you choose.
  • Percentage-based transforms
    The SVG spec doesn't even allow for percentage-based transforms, but GSAP does! You can easily move an SVG element based on a percentage of its width or height. This feature is great for responsive designs.

For more details and tons of demo's illustrating GSAP's unique SVG support read SVG Power Tips.

Fast load times

  • Zero dependencies
    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
    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
    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
    "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.

Don't take our word for it

If you're still wondering what the big deal about GSAP is, we'd encourage you to find someone who is proficient with it and ask about their experience. Usually people who take the time to learn it have a "light bulb" moment pretty quickly and never want to go back to using other libraries or CSS. It's difficult to explain to the uninitiated - lists of features don't really do it justice. It's about feeling empowered to animate almost anything you can imagine with minimal code.


GSAP was engineered and refined over a decade by professional animators in the trenches with practical concerns in mind. It's built to handle everything 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. And it's crazy fast. Perhaps these are a few of the reasons Google recommends GSAP for JavaScript animations and it's used in over 8 million sites. GSAP has been actively maintained and developed for a decade (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.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

User Feedback

Recommended Comments

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?
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now