TimelineMax – Sequence/Group Multiple Tweens, Control Them as a Whole

This page covers version 11 of TimelineMax which will soon be “sunset” in favor of the new, more capable version 12. We highly recommend using v12 for all of your projects. It is very stable and has numerous improvements while being backwards compatible with most legacy code (see the v12 announcement for details). The new version also has an incredibly fast JavaScript flavor that uses an identical syntax. Don’t miss out; upgrade today.

The “Download AS3″ and “Download AS2″ links to the right get you the [older] v11 files. Click the “get GSAP” button on the left to get v12, or go to the main v12 announcement page.

Watch the TimelineLite Ultimate Starter Guide video tutorial series to get up to speed fast. Highly recommended.


TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like AS3 event dispatching, repeat, repeatDelay, yoyo, currentLabel, addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), and getActive() (and probably more in the future). It is the ultimate sequencing tool. Think of a TimelineMax instance like a virtual MovieClip timeline or a container where you position tweens (or other timelines) over the course of time. You can:

  • build sequences easily by adding tweens with the append(), prepend(), insert(), appendMultiple(), prependMultiple(), and insertMultiple() methods. Tweens can overlap as much as you want and you have complete control over where they get placed on the timeline.
  • add labels, play(), stop(), gotoAndPlay(), gotoAndStop(), restart(), tweenTo() and even reverse()!
  • nest timelines within timelines as deeply as you want.
  • set the progress of the timeline using its currentProgress property. For example, to skip to the halfway point, set myTimeline.currentProgress = 0.5;
  • tween the currentTime, totalTime, currentProgress, or totalProgress property to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the whole timeline.
  • add onStart, onUpdate, onComplete, onReverseComplete, and/or onRepeat callbacks using the constructor’s vars object.
  • speed up or slow down the entire timeline with its timeScale property. You can even tween this property to gradually speed up or slow down the timeline.
  • use the insertMultiple(), appendMultiple(), or prependMultiple() methods to create complex sequences including various alignment modes and staggering capabilities. Works great in conjunction with TweenMax.allTo() too.
  • base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well.
  • kill the tweens of a particular object inside the timeline with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren()
  • set the timeline to repeat any number of times or indefinitely. You can even set a delay between each repeat cycle and/or cause the repeat cycles to yoyo, appearing to reverse every other cycle.
  • get the active tweens in the timeline with getActive().
  • add callbacks (function calls) anywhere in the timeline that call a function of your choosing when the “virtual playhead” passes a particular spot.
  • Get the currentLabel or find labels at various positions in the timeline using getLabelAfter() and getLabelBefore()

Interactive example

Sample AS3 code

import com.greensock.*;

//create the timeline and add an onComplete call to myFunction when the timeline completes
var myTimeline:TimelineMax = new TimelineMax({onComplete:myFunction});

//add a tween
myTimeline.append(new TweenLite(mc, 1, {x:200, y:100}));

//add another tween at the end of the timeline (makes sequencing easy)
myTimeline.append(new TweenLite(mc, 0.5, {alpha:0}));

//repeat the entire timeline twice
myTimeline.repeat = 2;

//delay the repeat by 0.5 seconds each time.
myTimeline.repeatDelay = 0.5;

//pause the timeline (stop() works too)

//reverse it anytime...

//Add a "spin" label 3-seconds into the timeline.
myTimeline.addLabel("spin", 3);

//insert a rotation tween at the "spin" label (you could also define the insert point as the time instead of a label)
myTimeline.insert(new TweenLite(mc, 2, {rotation:"360"}), "spin");

//go to the "spin" label and play the timeline from there...

//call myCallback when the "virtual playhead" travels past the 1.5-second point.
myTimeline.addCallback(myCallback, 1.5);

//add a tween to the beginning of the timeline, pushing all the other existing tweens back in time
myTimeline.prepend(new TweenMax(mc, 1, {tint:0xFF0000}));

//nest another TimelineMax inside your timeline...
var nestedTimeline:TimelineMax = new TimelineMax();
nestedTimeline.append(new TweenLite(mc2, 1, {x:200}));

insertMultiple() and appendMultiple() provide some very powerful sequencing capabilities, allowing you to add an Array of tweens (using TweenLite/Max instances or the new shorthand syntax, like [mc, 1, {x:100}]) and optionally align them with SEQUENCE or START modes, and even stagger them if you want. For example, to insert 3 tweens into the timeline, aligning their start times but staggering them by 0.2 seconds,

myTimeline.insertMultiple([new TweenLite(mc, 1, {y:"100"}),
						new TweenLite(mc2, 1, {x:120}),
						new TweenLite(mc3, 1, {alpha:0.5})],

You can use the constructor’s “vars” object to do virtually all the setup too, like this sequence:

var myTimeline:TimelineMax = new TimelineMax({tweens:[new TweenLite(mc1, 1, {y:"100"}), TweenMax.to(mc2, 1, {tint:0xFF0000})], align:TweenAlign.SEQUENCE, onComplete:myFunction});

If that confuses you, don’t worry. Just use the append(), insert(), and prepend() methods to build your sequence. But power users will likely appreciate the quick, compact way they can set up sequences now.

Watch a video that explains the basics of working with TimelineLite and TimelineMax.


Please view full ASDoc documentation here.


  1. Does TimelineMax only work with TweenMax instances? Can I use TweenLite too?
    You can put ANY (or all) of the following into a TimelineMax: TweenLite tweens, TweenMax tweens, TimelineLite timelines or other TimelineMax timelines. It’s an integrated suite. Go crazy mixing and matching. The only part of the platform that doesn’t work with TimelineLite/Max is the freakishly tiny TweenNano class.
  2. Do the AS2 and AS3 versions work exactly the same?
    Yes. To accommodate scope issues that are inherent in AS2, however, the AS2 version of TimelineMax also recognizes the following special properties to define the scope of callbacks: onStartScope, onUpdateScope, onRepeatScope, onCompleteScope, and onReverseCompleteScope. These are not necessary in AS3. Obviously the AS2 version doesn’t offer AS3 event dispatching either.
  3. How can I make a TimelineMax repeat infinitely?
    Just set its “repeat” property to -1.
  4. If I reverse() a TimelineMax right after I create it, nothing happens. Why?
    reverse() simply causes the timeline to change direction and go back towards its starting point, but if it is already there (if it never got past its starting point), there’s nowhere for it to go. There’s nothing wrong with reversing a timeline when it’s at its starting point, but keep in mind that doing so doesn’t force it to jump all the way to the end. You can easily do that with myTimeline.progress = 1 though.
  5. How do I install the class? Do I have to import it on every frame?
    Just make sure the “com” folder from the download is in the same folder as your FLA file. Keep the directory structure in the “com” folder, though (the class files are inside a “greensock” folder that belongs inside the “com” folder). That’s it. And, yes, just like any class, you need to import TimelineMax at the top of any frame that contains code referencing it. This does NOT add extra kb to your file size every time you import it. Flash is smart enough to embed it once and all the other import statements just act as a “pointer” to the embedded class.
  6. Can I put the same tween in multiple timelines?
    No. Every tween and timeline has one (and only one) parent timeline. Think of them like DisplayObjects/MovieClips – they cannot exist in two places at once. They can only have one parent.
  7. What’s the difference between TimelineLite and TimelineMax? Don’t they do pretty much the same thing?
    TimelineLite contains all the essentials, but TimelineMax extends it and adds more features (just like TweenLite and TweenMax). So TimelineMax can do EVERYTHING TimelineLite does plus more, like AS3 event dispatching, repeat, repeatDelay, yoyo, addCallback(), getActive(), tweenTo(), tweenFromTo(), getLabelBefore(), getLabelAfter(), currentLabel, etc. If you don’t need any of those features, stick with TimelineLite.
  8. Do I have to purchase a license to use this code? Can I use it for commercial purposes?
    You may use the code at no charge in commercial or non-commercial web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to 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 multiple end users are charged a usage/access/license fee of any kind, please simply sign up for a corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. See http://www.greensock.com/club/ for details. Club GreenSock members get several nifty bonus plugins, classes, update notifications, SVN access, and more. Your donations keep this project going. Please see the licensing page for details on licensing.

Need help?

Feel free to post your question on the forums. You’ll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.

Author: Jack Doyle
Copyright 2013, GreenSock (This work is subject to the terms here.)
  • Twitter
  • Facebook
  • Digg
  • StumbleUpon
  • del.icio.us
  • Yahoo! Buzz
  • Google Bookmarks
  • RSS
  • LinkedIn
  • Reddit

Comments (27) RSS

Posted by Vasya on December 10, 2009

is it possible to use this Sample AS3 code in AS2 ? thanks

Posted by admin on December 10, 2009

Sure, Vasya, you can use the same code for the AS2 version – the only exception is that some of the tween properties would be slightly different (like “x” in AS3 is “_x” in AS2, and same for “y”/”_y”, “alpha”/”_alpha”, etc.). The TimelineMax code itself uses exactly the same syntax in AS2 and AS3.

Posted by Tony on January 7, 2010

Is it possible to tween the timeScale of a single timeline within a master timeline?

Posted by admin on January 7, 2010

Sure, Tony, you can tween the timeScale of a nested TimelineLite/Max.

Posted by SavageLook on May 7, 2010

Just wanted to thank you guys for a great package. Transitioning between scenes in my away3d project just became a lot easier and logical thanks to the addCallback() and reverse() functions.

Posted by SavageLook on June 1, 2010

Got my site up and running: http://www.savagelook.com

Thanks again for TweenMax/TimelineMax, they helped a ton!

Posted by Karim on June 2, 2010

Hi, great work, very helpful thanks a lot !
Just one or two questions, does the reverse calculate again the position at each frame, or does it use a cached array of positions of the ‘normal’ tween and read it from the end to the beginning?

And is it possible to get this array (if it exists) and reuse it somewhere else without recalculate all the positions, scales, rotations etc ? Or do I need to create it by myself with the “onUpdate” parameter or something like this?
I hope my question is clear. Thanks

Posted by admin on June 2, 2010

Karim, the great thing about ActionScript-driven animation (at least the way the GreenSock system works) is that it is very dynamic and has no fixed “resolution” meaning that there isn’t a precalculated set of frames/values. The resolution is unlimited. You can render a tween or timeline at ANY time value (1 second in, 1.1, 1.00005, etc.) and it will figure out the precise values. That makes it silky smooth if, for example, you play the tween in slow motion (lower its timeScale). Traditional MovieClip timeline tweens that are built in the Flash IDE, however, have a fixed resolution which can start to look very choppy if you slow them down. Their duration will completely change if you alter the frame rate of your swf too. The GreenSock system, however, will adjust on the fly (although you can set useFrames:true and it will ensure that animations base their timing on frames instead of seconds if you prefer).

So to answer your question, no, there is not an array tucked away inside each tween with precalculated values. That’s a good thing :)

Posted by Somnath Dey on August 19, 2010

Fantastic,a great product for AS 3.0 so, many things can be

developed out of this

Posted by Anto on August 20, 2010

Hi! I just found this library which seems very cool but quickly a question haunted me : how to say I want a pause between each TweenMax’s step of the TimeLineMax:
timeline.append(step1); timeline.append(step2); etc… ?
By the way, great job !

Posted by Jack on August 20, 2010

Anto, it depends on what kind of “pause” you want. If you just mean that you want there to be a gap in time between your tweens (like tween1 runs…then waits 5 seconds…then tween2 runs), then it’s as simple as using the “offset” parameter of the append() method (or use a “delay” in your tween2 – either way works). Like myTimeline.append(tween2, 5);

If, however, you truly want to pause() the timeline after a certain tween, you can use an onComplete in that tween to call a function that calls the timeline’s pause() method. Should be pretty straightforward. Or you could addCallback() on the timeline itself to do the same sort of thing.

myTimeline.addCallback(myFunction, 5);
function myFunction():void {
//do other stuff…

As usual, there are lots of options :)

Posted by Anto on August 20, 2010

So many possibilities ! It’s super, you’re genius ! Thanks

Posted by Flashmode on November 8, 2010

Very usefull tool, thx

Posted by Mike on December 2, 2010

Hello man. Thanks for the amazing tools.

I cannot understand however why is there no way to align tweens at START when you add them one by one. It would be so intuitive to have something like

timelineMax.align = ALIGN_START

Have you ever though of that?

Posted by Jack on December 2, 2010

Sure, Mike, you can align tweens at the start when you add them one-by-one. That’s exactly what the insert() method is for. It gives you total control over where you place each tween on the timeline. So you can do this:

timeline.insert( new TweenLite(…), 0);
timeline.insert( new TweenLite(…), 0);

Both tweens would be aligned at the very beginning of the timeline.

If you haven’t already watched it, please view the video at http://www.greensock.com/timeline-basics/ because it should clear things up for you.

Posted by Ricardo on January 15, 2011

Hi Jack

After updating the API to version 1.63 the following code :

var timeline:TimelineMax;
timeline = new TimelineMax( { onReverseComplete:timelineClear } );

gives me the error :

VerifyError: Error #1053: Illegal override of insert in com.greensock.TimelineLite.

What could it be ?

Posted by Jack on January 15, 2011

Ricardo, it sounds like you must have a stale version of some of the classes (like SimpleTimeline) and a newer version of TimelineLite. Make sure you update all your GreenSock stuff. And if you’re subloading things, make sure you republish the parent and child swfs so you don’t have mis-matching classes.

Posted by viaria on April 17, 2011

The engine works perfectly.

Posted by Kevin Nugent on June 8, 2011

Hi, yoyo is just what I need for a banner that I’m working on though I’d really like the tween to reverse much quicker than it plays forwards. I was hoping for something like ‘reverseTimeScale’

var timeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1.0, reverseTimeScale:2.0});

Any pointers on the best way to achieve this will me very much appreciated.

Many thanks

Posted by Jack on June 8, 2011

Sure, Kevin, you could just create your main TimelineMax, pause it, and then use 2 tweens to play it forwards and backwards and tuck those into a parent TimelineMax that gets repeated. Kinda like:

var mainTL:TimelineLite = new TimelineLite({paused:true});
mainTL.append( … )
…add all your tweens…

var parentTL:TimelineMax = new TimelineMax({repeat:-1});
parentTL.append( new TweenLite(mainTL, mainTL.duration, {currentTime:mainTL.duration, ease:Linear.easeNone}), 1);
parentTL.append( new TweenLite(mainTL, mainTL.duration * 0.5, {currentTime:0, ease:Linear.easeNone}), 1);

Posted by faisal on January 11, 2012


can we create these kinds of animations with TimeLineMax, (instead of doing this on main flash timeline) ???


Posted by Jack on January 11, 2012

Sure, faisal, you can animate pretty much anything with the GreenSock tweening platform. I’ve built entire projects with animations like those (in the video you linked to) without any traditional timeline animations. I tend to do everything through ActionScript because of the flexibility it affords. Plus it can be faster especially when animating a lot of objects at once. Being able to modularize things and nest TimelineLites/Maxes inside other ones makes it particularly convenient to build complex, lengthy animation projects. See http://www.greensock.com/tweening-tips/#3 for that technique.

Happy tweening!

Posted by rexydallas on March 14, 2012

is it possible to use these in FlashDevelop?

Posted by Jack on March 15, 2012

Absolutely – I can’t imagine why not. It’s just ActionScript, so there’s no dependency on a particular authoring tool or anything. Happy tweening!

Posted by Luke on April 27, 2012

I was wondering if anyone can help me, I’ve set up a timeline but I would like one of the tweens to keep repeating but for the timeline to carry on. At the moment the tween repeats an infinite amount of times so its set to repeat: -1, but I then want the timeline to carry on while the previous tween repeats.

Any help would be much appreciated!

Posted by Jack on April 27, 2012

Luke, I’m not quite sure what you mean by “timeline to carry on” – it is indeed carrying on (otherwise you wouldn’t see the child repeating tween playing). Did you mean to ask how you could append() things after the initial play of the repeating tween? That’s definitely possible. Just keep in mind that append() will always put things at the very END of the timeline, so if you have a child that’s set to repeat indefinitely, your timeline’s “end” will be…well…SUPER far in the future. But you have total control of where your tweens get inserted by using the insert() method. So define a time that way, like timeline.insert(myTween2, 5) to insert it at exactly 5-seconds. Or if you like the whole append() approach, you can just nest another timeline in there, and build that one out. Like:

var parentTL:TimelineLite = new TimelineLite();
parentTL.append( TweenMax.to(mc, 1, {x:100, repeat:-1, yoyo:true}) ); //infinitely repeating

var childTL:TimelineLite = new TimelineLite();
parentTL.insert(childTL, 1); //starts at 1-second, meaning right after the repeating tween finishes its first play
childTL.append( … );
childTL.append( … );

That gives you the best of both worlds.

Posted by Luke on April 27, 2012

Thanks for such a quick reply!

I wanted to append more tweens while the previous tween was repeating infinitely, but they obviously wouldn’t as the repeating tween wouldn’t end.

I got it working using the insert() method instead now.

Many thanks for such a great detailed quick response!

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 http://www.greensock.com/club/ 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 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.

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

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.

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.

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: