TimelineLite

TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a virtual MovieClip timeline or a container where you place tweens (or other timelines) over the course of time. You can:

  • build sequences easily by adding tweens with convenient and familiar methods like: to(), from(), staggerFrom(), staggerTo() and more. Tweens can overlap as much as you want and you have complete control over where they get placed on the timeline.
  • add labels, play(), pause(), seek(), restart(), and even reverse() smoothly anytime.
  • nest timelines within timelines as deeply as you want.
  • set the progress of the timeline using the progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5);
  • tween the time() or progress() 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 timeline.
  • speed up or slow down the entire timeline with timeScale(). You can even tween timeScale() to gradually speed up or slow down.
  • add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor's "vars" object.
  • add Arrays of tweens and timelines to create complex sequences including various alignment modes and staggering capabilities.
  • 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 with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren()
  • If you need even more features like AS3 event listeners, repeat, repeatDelay, yoyo, currentLabel, getLabelAfter(), getLabelBefore(), getActive() and more, check out TimelineMax which extends TimelineLite.

Interactive example

Get Adobe Flash player

Sample AS3 code

import com.greensock.*;

//create the timeline and add an onComplete callback that will call myFunction() when the timeline completes
var myTimeline:TimelineLite = new TimelineLite({onComplete:myFunction});

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

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

//reverse anytime
myTimeline.reverse();

//Add a "spin" label 3-seconds into the timeline
myTimeline.add("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.to(mc, 2, {rotation:"360"}, "spin");

//go to the "spin" label and play the timeline from there
myTimeline.play("spin");



//nest another TimelineLite inside your timeline...
var nestedTimeline:TimelineLite = new TimelineLite();
nestedTimeline.to(mc2, 1, {x:200});
myTimeline.add(nestedTimeline);

The add() method provide some very powerful sequencing potential, allowing you to add an Array of tweens or timelines 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.add([new TweenLite(mc, 1, {y:"100"}),
		new TweenLite(mc2, 1, {x:20}),
		new TweenLite(mc3, 1, {alpha:0.5})],
		0,
		"start",
		0.2);

You can use the constructor's "vars" object to do virtually all the setup too, like this sequence:

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

Documentation

Please view full ASDoc documentation here.

FAQ

  1. Does TimelineLite only work with TweenLite instances? Can I use TweenMax too?You can put ANY (or all) of the following into a TimelineLite: TweenLite tweens, TweenMax tweens, other TimelineLite timelines or 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 TimelineLite also recognizes the following special properties to define the scope of callbacks: onStartScope, onUpdateScope, onCompleteScope, and onReverseCompleteScope. These are not necessary in AS3.
  3. If I reverse() a TimelineLite 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.currentProgress = 1 though.
  4. 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 TimelineLite 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.
  5. 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.
  6. 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.
  7. 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.

Get GSAP

Version: 1.20.3 updated 2017-10-02

Core

    Extras

      Plugins

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

        Help support GreenSock by becoming a member

        Join Club GreenSock