Jump to content
Search Community

A clarification of TweenMax, TimelineLite, TimelineMax, etc, please

IanY test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have seen the following codes, but can't really tell the difference between them. I know the usage of .staggerFrom; what I don't currently understand is why the portions before .staggerFrom varies.

new TimelineLite().staggerFrom(......)




Shouldn't TweenMax, TimelineLite, and TimelineMax be added to new TimelineLite()? If so, why can new TimelineLite() itself concatenate a .staggerFrom(......) ?

Link to comment
Share on other sites

  • Solution

I'm not sure I understand your question accurately, but maybe it'll help to understand the evolution...


Everything in GSAP is object-oriented so each tween is an object itself. That's why you can control individual tweens with methods like restart(), seek(), etc.


There are "static" methods which are attached directly to the class itself, like TweenMax.to() which is just a convenience we provide for creating a tween:

//these all do the same thing (but the first just assign the tween to a variable)
var tween = new TweenMax(...);
var tween = TweenMax.to(...);

Without the static methods, your code would be a tad longer, and people would feel like they have to maintain references as variables (which aren't necessary at all, and could even prevent GC). Again, it's about convenience for you as the developer, and keeping your code clean. 


At first, there was only TweenMax.to()/from() but it quickly became clear that it'd be really nice to have a stagger method that create a bunch of to() (or from()) tweens for you, with just staggered timing. So we added TweenMax.staggerTo(). Great.


Then, we created TimelineLite and TimelineMax which are simply containers for tweens (and other timelines). But every animation ultimately boils down to a tween instance (TweenLite or TweenMax). That's what populates timelines. So to get them in there, we had the add() instance method:

timeline.add(tween, time)
timeline.add(tween, time)

But that's annoying to type it all out, like:

timeline.add( TweenLite.to(...), time)

Notice that you're having to type "TweenLite.to(" a lot, so we added convenience methods to the timeline classes that just make your code cleaner:

timeline.add( TweenLite.to(...), time);

timeline.to(..., time)

The old way still totally works - we just provided a new, more convenient way to do exactly the same thing. 


The same goes for staggers:

timeline.add( TweenMax.staggerTo(...), time);

timeline.staggerTo(..., time);

If you're asking why we don't have static TimlineLite.staggerTo() methods, it's because:

  1. Timelines by their very nature are very instance-specific. When you're adding tweens to a timeline, you've gotta be specific about which instance you're talking about. Thus, it's not very helpful to have static methods which are not instance-specific.
  2. It'd clutter the API unnecessarily. 
  3. It'd require a lot of typing. tl.staggerTo() is much easier than TimelineLite.staggerTo() ;)

Does that answer your question? Again, I have a sneaking suspicion that I didn't understand your question properly. 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

 tl = new TimelineLite();    //is there any difference here

tl = new TimelineMax();  //from here


When I choose the first and when the second?

Is there any diference?



tl.to     //when choose this one

TweenMax.to     //and when to choose this


 What are the diferences? 

Link to comment
Share on other sites

There is a difference between TimelineLite and TimelineMax. From the docs:


TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future).


More info:




A timeline is a container for tweens and other timelines. If you have several tweens that you want to sequence, a timeline is the way to go. If you just have a few tweens that you want to start at the same time, you may want to just use tweens. It's really dependent on what you're creating and how you want to control it.


Happy tweening.




  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...