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

[IanY]

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

TweenMax.staggerFrom(......)

TimelineLite.staggerFrom(......)

TimelineMax.staggerFrom(......)

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

[GreenSock]

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(...);
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:

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

//NEW
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:

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

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

[IanY]

Hi Jack. Thank you very much! You have answered my question.

[makis2404]

 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?

 

Then

tl.to     //when choose this one

TweenMax.to     //and when to choose this

 

 What are the diferences? 

[PointC]

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:

https://greensock.com/docs/TimelineLite

https://greensock.com/docs/TimelineMax

 

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.