Get GSAP

Version: 1.13.1 updated 2014-07-22

Core

    Extras

      Plugins

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

        Why GSAP for HTML5 Animation?

        June 17th 2013 | GreenSock
        favorite 1339

        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".

        HTML5
        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.
        GSAP
        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 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
          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
          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.

        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, 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.

        Animate anything

        • DOM elements? Canvas libary 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 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
          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.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)
          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.
        • 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.
        • Exclusive easing
          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
          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.

        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.

        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