Which is the prefered Constructor to use when I include TweenMax.min.js into my page?

[Jonathan 5,176 Likes (Superhero)]

Hello everyone

 

This might be a stupid question but i had to ask to better understand the JS API ..

 

I know that when you include TweenLite.min.js in your page that you use the TweenLite constructor when using different methods in the API

 

But lets say If i have TweenMax.min.js INCLUDED in my page:

• what is the best usage for using set() .. using the TweenLite or the TweenMax Constructor?

Its been said in the forums that you can use either TweenLite or TweenMax IF TweenMax.min.js is INCLUDED in your page...  

• so I was curious as far as performance and/or preferred usage.. which is appropriate to use if I have TweenMax.min.js included in my page?
• or can i use both

using TweenLite:

TweenLite.set(element, {x:100, y:50, opacity:0});

or using TweenMax:

TweenMax.set(element, {x:100, y:50, opacity:0});

or can i use either or ???

 

Im sure that what Im asking can relate to other methods in the API, when i have TweenMax.min.js included in my page.. so any help will be highly appreciated

 

thanks in advance !

[Rodrigo 2,662 Likes (Superhero)]

Hi Jonathan,

 

Jack posted a reply some time ago stating that the Lite constructors are faster than the Max ones. The reason?, perhaps since the Max constructors have to check for more stuff (repeat, yoyo, etc.), code execution might take a tiny bit longer, Carl or Jack are more suited for that particular explanation.

 

In the mean time take a look at the following:

http://forums.greensock.com/topic/8450-arranging-looped-animations-in-master-time-line/#entry32950

 

Happy Tweening!!

[Jonathan 5,176 Likes (Superhero)]

Thank You for replying back Rodrigo

 

the reason i was asking is because i noticed some methods will throw an error if you try to use TweenLite constructor when TweenMax.min.js is included

 

for example.. i notice that the staggerTo() and killChildTweensOf() throw an error when i use TweenLite constructor

 

look at this example and have your console open to see the error thrown:

 

See the Pen LEaxw by jonathan (@jonathan) on CodePen

 

can anyone explain why it throws this error:

TypeError: TweenLite.staggerTo is not a function
http://s.codepen.io/pen/secure_iframe?turn_off_js=false&mobile=false
Line 28

if i make the constructor TweenMax it doesn't throw the error

 

any help as always will be highly appreciated

[Carl 9,066 Likes (Superhero)]

TweenLite is the core of the animation platform and is intentionally kept small to contain "just the necessities". TweenMax inherits all of TweenLite's methods and properties and includes a few additional ones.

 

Visit the TweenLite docs and you will see that TweenLite doesn't have the methods that were throwing the errors http://api.greensock.com/js/com/greensock/TweenLite.html

 

Another helpful tip is this, When viewing the TweenMax methods in the docs, toggle the "show/hide inherited methods" link. If you "hide inherited methods" you will see just the methods that are unique to TweenMax.

 

You will notice that methods like from() and to() (and others) that TweenLite also has will still appear. The reason for this is that TweenLite's from() and to() methods return TweenLite instances but TweenMax's from() and to() return TweenMax instances (to support repeating and other features).  

 

Its understandable that there can be some confusion about which methods belong to which tool. Glad you asked. Let me know if you need more help.

[Jonathan 5,176 Likes (Superhero)]

Awesome Carl, that did clear things up! Thanks for the tips when viewing the API... That should go along way going forward when declaring the right Constructor for speed and performance.

 

i will keep an eye on the API docs Defined By column, and the "show/hide inherited methods" link.. to better know what Constructor is defined by what ..

 

Thank you Carl