Share Posted March 27, 2017 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(......) ? Link to comment Share on other sites More sharing options...
Share Posted March 27, 2017 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: 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. It'd clutter the API unnecessarily. 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. 4 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 28, 2017 Hi Jack. Thank you very much! You have answered my question. Link to comment Share on other sites More sharing options...
Share Posted July 26, 2018 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? Link to comment Share on other sites More sharing options...
Share Posted July 26, 2018 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now