Video: Sequence JavaScript Animations Like a Pro with GSAP’s TimelineLite

This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease. Although GSAP is very powerful and flexible, the API is beginner-friendly. In no time you will be creating TimelineLite animations that can bend and adapt to the needs of the most demanding clients and art directors. Watch the video and ask yourself, “Can my current animation toolset do this?” Enjoy.

Video Highlights

  • Tweens in a TimelineLite naturally play one-after-the-other (the default insertion point is at the end of the timeline). No need to specify or update the delay of each tween every time the slightest timing changes are made.
  • Tweens in a TimelineLite don’t need to play in direct sequence; you can overlap them or easily add gaps.
  • Multiple tweens can all start at the same time or slightly staggered.
  • Easily to rearrange the order in which tweens play.
  • Jump to any point of the timeline to finesse a particular animation. No need to watch the whole animation each time.
  • Add labels anywhere in the timeline to mark where other tweens should be added, or use them for navigation.
  • Control the speed of the timeline with timeScale().
  • Full control over every aspect of playback: play, pause, reverse, resume, jump to any label or time, and much more.

Unlike jQuery.animate() or other JS libraries that allow you to chain together multiple animations on a particular object, GSAP’s TimelineLite lets you sequence multiple tweens on multiple objects. Its a radically different and more practical approach that allows for precise synchronization and flexibility.

If you are still considering CSS3 animations or transitions for robust animation after watching this video, please watch it again ;)

If you are wondering what autoAlpha refers to in the code above, its a convenience feature of CSSPlugin that intelligently handles “opacity” and “visibility” combined.

Recommended reading:

  • Twitter
  • Facebook
  • Digg
  • StumbleUpon
  • Yahoo! Buzz
  • Google Bookmarks
  • RSS
  • LinkedIn
  • Reddit

Comments (11) RSS

Posted by Rodrigo on May 7, 2013

Nice job professor Schooff!! ;-)

I’ll be waiting for the next lesson, keep up the good job guys.


Posted by Azuki on May 8, 2013

Thank you!! Nice work Carl, I’m very happy to see a new GSAP video tutorial and I really like the format using Codepen to watch live changes.

Keep up the great work!


Posted by Sean Powell on May 8, 2013

Great job, Jack, as usual. I look forward to working with this in action.

- Sean

Posted by Brian on May 8, 2013

Nice work Carl. We need more videos like this! And I agree, using Codepen is the way to go.

Posted by Jason on May 9, 2013

This came along at just the right time for me. I have a client looking for somehting like this in HTML5 instead of Flash… I am a Flash developer of 13 years’ standing. This looks like it will allow me to switch without breaking stride.

Posted by lbineau on May 9, 2013

Really nice tutorial !
I’m wondering if it could be possible to get a param of an object directly in the tween. Let me explain.

For example, I want the wrapper to appear from the top. This is what I’m doing :
var h = $(‘#demoWrapper’).height(); and use it in the tween tl.from(“#demoWrapper”, 0.5, {top:-h});

But would it be possible to dynamically get the property of the object we are tweening in GSAP with a similar syntax ?
tl.from(“#demoWrapper”, 0.5, {top:’-{self}.height’});

Posted by Jack on May 9, 2013

Ibineau, that’s a cool idea but unfortunately it just isn’t realistic due to some technical reasons, not to mention the kb it’d eat up (and we try very hard to keep file size down and performance maximized). For most basic properties, it’d be relatively easy, but what about special properties and plugin values? There are some that are non-trivial to grab/calculate, and adding this layer of parsing would be rather cumbersome. I appreciate the suggestion, though. We’ll definitely keep it in mind as a possible future enhancement, especially if many people request it.

[...] Sequence JavaScript Animations Like a Pro by Greensock [...]

Posted by Lore on March 14, 2014

Can you time it to an audio player?

I’ve been trying to time animations to match with mediaelement.js & it’s not going well. issues with sound players and mobile devices, ie7, etc etc, and none of them time to audio.

I’d be a happy customer to buy such a thing.

Posted by Jack on March 14, 2014

Sorry to “hear” about the audio problems (sorry, couldn’t resist). Frankly, I haven’t dealt much with audio in HTML5 yet, but my understanding is that it’s a huge pain right now. I’m sure it’ll get better eventually. We may tackle something like that in the future, but right now we’re staying laser-focused on animation.

You should be able to synchronize audio with a TimelineLite/Max by simply using a setInterval() (or something like that) to poll the audio’s time and adjust the timeline’s time().

I hope that helps (at least a little). Happy tweening!

Posted by Michael Thorne on May 2, 2014

That’s a great solution for the audio syncing. You would basically just play your audio and use the timeline of the audio file to dictate the timeline of the animation. If you have player controls like fast forward, rewind or scrubbing available on the audio (or video!), then the animations would always stay synced. You could even scale your animations timeline to match the timeline of the audio file.

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


  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 for details.
  2. Use at your own risk. No warranties are offered.
  3. Please respect the copyright.



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

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

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

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

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

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.

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.

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: