GSAP: Professional-Grade HTML5 Animation

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
t

GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, API efficiency, and tight control. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. Use animation to tell a story in a rich way rather than settling for a few fades and slides.

Latest news:

Dive in

Download the code

Read the Getting Started Guide

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

Full documentation: Read up on every property and method.

Get help in the forums.

Tutorials, Demos, and Articles

Jump Start: GSAP JS: visually demonstrates the basics of the API and gets you up and running fast. The interactive slides make it easy (or dare we say it…”fun!”).
Myth Busting: CSS Animation vs JavaScript: This guest post on css-tricks.com challenges some commonly-held beliefs about CSS and JavaScript animation, and delivers some data that might surprise you.
What’s the big deal about GSAP for HTML5 animation? See for yourself in this practical guide for web developers, explaining the real-world, practical reasons why so many people are switching to GSAP.
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.
A candid review of GSAP by Aaron Brown: An insightful and humorous read about experiencing GSAP for the first time. Never thought there would be a Justin Bieber tie-in with our platform, but Aaron pulls it off with style.
3D Transforms & More CSS3 Goodies Arrive in GSAP JS: See some of the exciting CSS3 properties that can be animated in GSAP including 3D transforms, boxShadow, textShadow, borderRadius, and clip.
CSS3 Transitions vs GSAP: Cage Match: See how GSAP matches up against CSS3 transitions and animations in this “cage match”, category-by-category.
jQuery vs GSAP: Cage Match: See how GSAP matches up against jQuery in this “cage match”, category-by-category.
GreenSock JavaScript Animation: Jens Ahrengot literally makes his blog post come to life with GSAP. Great demos and easy to understand code samples.
HTML5 Animation with TweenMax: This excellent video by Lee Brimelow will walk you through getting started with TweenMax. Covers both DOM and canvas animations.
DNA: Chris Gannon has been on the forefront of integrating GSAP with Adobe Edge Animate. His work often makes us wonder “is that really a DOM animation?” His blog has great demos with source files: 3D Card Flip | Moo Disco | Manta Ray.
SuperScrollorama: John Polacek’s ground-breaking jQuery plugin is driving today’s cutting-edge sites with some help from TimelineMax.
Particles: WebGL + GSAP + ThreeJS: GSAP plays well with others:) Rahmat Hidayat shows off an impressive particle effect (viewable in Google Chrome only).

Inspiring sites that use GSAP

What’s included in GSAP?

  • 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)
  • 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. In addition it automatically activates many common plugins and includes TimelineLite and TimelineMax. TweenMax provides access to the platform’s most powerful and popular features through the loading of a single script. The focus is on being full-featured rather than lightweight (~21kb gzipped).
  • 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. The animation at the top of the page is a great example of how TimelineLite makes it easy to control dozens or even thousands of tweens with ease.
  • 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.
  • Easing tools and plugins for doing things like animating along Bezier paths, scrollTo, EaselJS, RaphaelJS, utilities like Draggable and much more…


Why you'll love GreenSock Animation Platform v12

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, arrays, scrolls and lots more. Round values, smoothly reverse() on the fly, use relative values, automatically accommodate getter/setter functions, employ virtually any easing equation, and manage conflicting tweens like a pro. Define callbacks, tween in seconds or frames, build sequences effortlessly (even with overlapping tweens), repeat/yoyo and more.

Compatible

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. It even accommodates various transforms (scale, skew, rotation, x, and y) in modern 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.

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.

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.

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.

FAQ (click to view answer)

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

Comments (28) RSS

Posted by Brennan on October 12, 2012

Jack, you are just plain awesome. Your tool is useful and absolutely brilliant. Keep up the good work, the member ship fees are more than worth it.

Posted by Erik on October 23, 2012

Awesome demo Jack!

Posted by David Szucs on November 1, 2012

You are people from an other world. Truly amazing. Thanks a lot!!!! Pisz!

[...] some design stuff. Then I decided to turn my design into an interactive 3D object (all powered by Greensock), as you [...]

[...] GSAP JS – Professional-Grade JavaScript Animation [...]

Posted by Peter_D on February 22, 2013

Some simple selector engine would be a great add-on to GSAP

Posted by Jack on February 23, 2013

Ever since version 1.8.0, GSAP has an ID selector built-in and it also allows you to use any standard selector engine like jQuery, Sizzle, Zepto, etc. using the TweenLite.selector property. It automatically uses jQuery if it’s loaded. We didn’t want to reinvent the wheel by doing our own version of a selector engine at this point because it doesn’t seem like an area that needs much help and we’d like to keep the engine very streamlined and focused.

So to be clear, if something like jQuery is loaded, you can do this:
TweenLite.to(“.myClass”, 2, {top:”+=100px”});

And even if jQuery (or similar) isn’t loaded, you can still do this:
TweenLite.to(“#myID”, 2, {top:”+=100px”});

Posted by Pavel on March 25, 2013

Hey,
I am trying to clarify something. Using:

var tween = TweenMax.to (…)

vs

var tween = new TweenMax.to (…)

if I don’t instantiate will that “recycle” that instance of the same tween or constantly create a new one? If it creates a new one will the old once be GCed by the browser?

Posted by Jack on March 25, 2013

No, Pavel, your last example uses an invalid syntax:

//GOOD:
var tween = TweenMax.to(…);
//ALSO GOOD:
var tween = new TweenMax(…);
//BAD:
var tween = new TweenMax.to(…);

There is no recycling of instances that occurs because that could actually cause big problems if, for example, you want to control an instance later using its methods like restart(). But yes, the engine automatically releases references internally to enable garbage collection. It shields your tweens from garbage collection when necessary, and releases them when it’s appropriate. You shouldn’t have to worry about any of that.

Happy tweening!

Posted by KJ on April 4, 2013

Goodbye Flash. Hello GSAP. The King is dead! Long live the King! Just discovered this a couple of weeks ago and completed my first project (my own portfolio) with groovy page transitions that would otherwise have been dizzyingly complicated. I’m hooked. With the power of transforms and GSAP, what can flash do that can’t be done in plain ‘ol HTML/js? Can’t wait to implement on future projects. Great job, Jack!

Posted by Brandon Weiss on April 11, 2013

Truly Awesome! Best of luck to this super cool project!

Posted by mastrobardo on April 18, 2013

thx, i can use the same tween engine ( and port the same code ;) ) on html sites as well. +1 , and i’ll buy the full licence for as3.

Posted by H@chimuto on May 25, 2013

Believe me, this is the most flexible super fast javascript animation tool I had never seen.Great Job.

[...] framework I just started working on. It is called TweenDeck, and it is built on top of the Greensock Animation Platform. If you know what you are doing in Greensock, and understand how to build a Timeline animation, [...]

[...] Sites using SuperScrollorama (and also Greensock Animation): [...]

Posted by The Badger on July 14, 2013

My day has just become so much brighter! I used to use your stuff for flash. I loved it. Really.

Now I discover you are doing a similar sort of thing for html5-javascript.

I am so excited! No one does what you can do Jack.

I’m going to ferret about on your web site like an excited, um, ferret.

tB.

Posted by GSAP – Javascript Animation | on July 17, 2013

[...] becomes – how do we produce top-notch animation in the DOM without Flash? The answer is GSAP (Green Sock Animation Platform). Check out the sweet promo [...]

[…] an extra punch we are going to do this JavaScript style using the Greensock animation library which was a staple in the Flash world and has been ported over to JavaScript. I […]

[…] always the functionality’s foundation is the ever rock solid Greensock GSAP (where Jack kindly features some of my work) and without which none of this would work very well […]

Posted by madhu kumar on September 23, 2013

Is it possible to use Gasp perfectly in Windows 8(WinJS) Application? It is working but seems like tough using slider animation control in Windows 8 Application.

Posted by Sayka on September 27, 2013

You’ve opened a lot of opportunities and possibilities for people Jack. You are awesome…

Awwweeesssommeee……………

Posted by Jack on October 25, 2013

Yes, madhu, the new version of Draggable works on Windows 8 touch devices. Microsoft decided to use their own proprietary MSPointerEvents instead of the industry standard touch events, but now Draggable works with them all.

Posted by Sara on October 29, 2013

I find it not simply good – but incredible. I’ve include it along with some other html5 animation tools here: http://bit.ly/1cfzirW

Posted by Thomas Federico on October 30, 2013

Hey Jack, it has been many years that I have been using your GreenSock Tweening Platform, first in AS3 then with JS…

Since it has gained more and more popularity, have you ever thought about writing books about how to using it for AS3 and JS? It’ll be really helpful and I’ll be sure to get it/them if they’ll be released one day.

Best regards.

Posted by Jack on October 30, 2013

First of all, thanks for being such a long-time user and supporter, Thomas.

Funny you should ask about writing a book. Carl Schooff, our very own Geek Ambassador, is finishing up an excellent book right now that serves as curriculum for the upcoming class at Noble in NYC! He’s the master when it comes to teaching this stuff and I think this will be a very valuable resource. The plan is to publish it and make it available at places like Amazon.com too, but if you’re able to sign up for the Noble class I think that’s by far the best option. http://www.nobledesktop.com/greensock/

[…] next few lines of JavaScript is where the magic happens. For the purpose of this example I am using GreenSock’s GSAPJS, which is pretty much the best tweening library out there (at least in my opinion) but you can […]

Posted by Tinku Tharasing on May 11, 2014

I was a fan of TweenMax library while i was a flash freelancer and built many websites using this platform and now i am happy to see the js version of it. I have used some of its basic features for prince dale website project i have done.

Would try to build complex sites soon using this awesome platform.

Thank you Greensock.

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: