Jump Start: GSAP JS

Learn the basics of GSAP JS fast. The Jump Start will walk you through a number of interactive slides that will show you exactly how GSAP JS works. Animating with JavaScript just got a whole lot easier.

Source files for all the demos are available for download or play with them live on codepen.


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

Comments (34) RSS

Posted by norsklionheart on November 28, 2012

First! Thanks Jack, that is an awesome presentation :)

Posted by Michael Dobekidis on November 28, 2012

Really helpful application, thanks for putting this together!

[...] If you haven’t heard of TweenMax/TweenLite you definitely need to check out what Jack Doyle (The GreenSock guy) has for a tweening library. Check out the TimelineMax also and see what awesome stuff you can do. Also check out the speed test of the TweenLite: Greensock TweenLite Speed Test or http://www.greensock.com/jump-start-js/ [...]

Posted by HS on December 5, 2012

Great!!!

[...] Jump Start – GSAP JavaScript [...]

[...] have spent my morning on going through this wonderful Jump Start: GSAP JS, a quick-start guide for getting your feet wet in no time!  As having a bit knowledge of TweenLite [...]

Posted by Josh Knell on December 19, 2012

Really grateful for your passion to make things amazing. I am amazed at what can be done and with so little code. I bow to the shifu.

Posted by William on December 28, 2012

Hello , god bless you, this is an exclellent tool dude!! really amazing!!!

Posted by Wenhong Zhou on December 28, 2012

Thanks very much! It’s really amazing!

Posted by Jim S on January 6, 2013

Thanks for your amazing effort! Greetings from Toronto, Canada.

Posted by Mar on January 8, 2013

A really good jump-start tour, helps me get a glance of GSAP JS in 5 minutes. And the entire library is amazing!

Posted by Shrinivas on January 14, 2013

Learnt the lot with this tutorial.. Thanks for taking time to prepare this useful stuff.

Posted by Otkupljivanje Zlata on January 21, 2013

Hi,

I’ve been using TweenLite/Max in past,for example on this AS3 web (http://www.antebacak.com/). Now, when I’m on jQuery i can only say great job guys with JS version!

Best plugin ever, preiod.

Posted by LewisOne on February 7, 2013

Jack,

You are greener than the weed we grow in Colorado.

I love the Flash AS3 stuff, been using it for years and years and years, now getting into the JS. Totally frustrated because I could not get it to work for Crap, head hurts from banging it into my monitor, toes hurt from kicking the legs on my desk.

However being a little green myself with JS, a little high, and a bit drunk (because that is the best way to do any programming efficiently) and with some fiddling I figured out why…

Stupid me didn’t know to add the line:
“”

Then the scripts work to make buttons work. Your tweenCode works like a charm all of a sudden, hahhahaaa.

Now I can go back to being an evil little greenSock monster making things happen.

You have the absolute best group of tools around for animating on the web.

XOXO,

LewisOne

Posted by Otkup Zlata on February 12, 2013

Thank you! Excellent tool. It helps a lot!

Posted by amil on February 19, 2013

Great!!!

Posted by Louis Charland on March 6, 2013

You have made my day’s again!….. (Last time…2008 the AS3 version!)

Posted by PSDSIGN on March 9, 2013

Excellent work

I say “Hello” to GSAP-Javascript and Good Bye to other APIs. I my opinion there is only one word for Your Plattform:

“AWE … wait for it … SOME”

Posted by Leko on May 15, 2013

How can i make more strong the ease “ease:Back.easeOut”?

Posted by Jack on May 15, 2013

Leko, you can configure the amount that the Back.easeOut ease shoots past its target by using the config() method, like:
ease:Back.easeOut.config(5)
The higher the value, the more it’ll overshoot.

[...] Jump Start: GSAP JS by Greensock [...]

Posted by Aamir Shahzad on June 17, 2013

good one… i like it :-)

Posted by AIJ on June 24, 2013

Thanks a lot!I just need it now!

Posted by Arslan Akram on July 27, 2013

Awesome… simply awesome! Keep up the brilliant work!

Posted by Guillermo on August 9, 2013

this is absolutely brilliant

[…] the Thesis ‘Site’ menu. The best place to get started building these scripts is the Jump Start: GSAP JS page. Adding scripts to the ‘Tracking Scripts’ area of the Thesis ‘Site’ […]

Posted by Syed Shahid on November 4, 2013

I am just starting my career as a freelancer and writing those complex js code to animate things is something quite time consuming, but now i think with GSAP every thing’s gonna be piece of cake. Thanks for such a great gift for developers. Keep up the great work!

Posted by Kiril on December 8, 2013

Clear and concise presentation of features and their use. Thank you much!

Posted by leylaloly on December 22, 2013

Thank you Jack ^_^ u’re AMAZING

Posted by Bruno on January 13, 2014

I have not tested yet, but I can see a excellent work here. Congratulations!

Posted by Jordan on January 15, 2014

wow – just stumbled onto this… looks amazing! great intro!

Posted by David on January 28, 2014

Amazing…definitely using this in my next project. Thanks!!!!!!!!!!!!!

Posted by Venkat on March 4, 2014

The simplest tool to animate anything in this world… WayToGo GSAP. Congrats…

Posted by Cato3000 on June 13, 2014

YES. This is what I’ve been looking for! I’ve been killing myself trying to build a library of practical ways of implementing subtle animations with jQuery. And I hate using plugins. I have found my Unicorn. I just purchased the class book. Thanks a trillion!

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: