MT

Order loading TweenMax and TweenLite error

Recommended Posts

Hi,

 

Whenever i load TweenLite first and TweenMax secondly TweenMax its undefined.

 

If i load TweenMax first and TweenLite second both appear to work.

 

I will not use TweenLite but i am using Revolution Slider plugin on my Wordpress Theme and the plugin loads first. It is using TweenLite version 1.11.5 and it does put my TweenMax 1.12.1 on undefined state.

 

So trying to understand why it is happening i deactivated the plugin and started to load both and found this.

 

Is there any kind of fix?

 

Cheers,

MT

Share this post


Link to post
Share on other sites

Hi,

 

Take a look at this Fiddle demo :http://jsfiddle.net/GRA89/6/

 

The TweenMax get's undefined.

 

I just saw a previous post of "themepunch" but the logic is not correct. A plugin should not interfere with what i as a theme developer i am doing.

 

I should not depend on "themepunch" update to have my theme running the latest 1.12 version.

 

So if i am the last on the load queue i don't want to get pushed back by other early loads of the TweenLite.

 

The order is:

 

1) Plugin load queue

2) Theme load queue

 

So basically the 2) should be the boss since a Plugin is optional and should not overwrite or kill my new instance of TweenMax and/or TweenLite

 

Cheers,

MT

Share this post


Link to post
Share on other sites

Hi,

 

I am afraid this is not really or not only Themepunch relevant. You will have same issues with any other plugin which loads TweenLite / TweenMax with older version etc..   

 

We did add a protection now as introduced from Greensock here: http://forums.greensock.com/topic/9881-avoid-multiple-loaded-tweenmax-and-tweenlite

 

However ! This will not solve your issue.  If any other plugin loads TweenLite, you will get the same problem. 

 

There are two ways to solve it.  

 

1, you follow yourself the instructions above, and put your GreenSock engine in a sandbox,  

2. GreenSock solves possible conflicting with itself on different versions, internally 

 

i would love to see a solution from GreenSock site, where the engine recognize if older, smaller newer, bigger package is loaded, and act / reinit as needed.  

 

It is for sure much complicated as i can imagine it, but i am afraid there will be a lot similar discussion now, since the whole Envato Marketplace discovered this Valuable engine of GreenSock.

 

Hope to find some clever and flexible solution soon ?

 

Cheers,

 

ThemePunch

Share this post


Link to post
Share on other sites

Hi,

 

I think you are missing the whole point of a plugin. The plugin is secondary and the theme is the main asset.

 

But this is not the important issue.

 

What i want is that whenever i load TweenMax i want to not be overwrited by a previous load.

 

So others load first tweenmax( may be older versions, newer or whatever )

 

But if i am the last that loaded TweenMax then i want my version to work.

 

Basically any other plugin that would have an older version of TweenMax and it would not work with the newer one is not my problem and it is the plugin developer problem.

 

Anyway, still the question remains: TweenMax does not work if i load TweenLite first, can this be fixed?

 

Cheers,

Mediacreed

Share this post


Link to post
Share on other sites

Please take a look on this Fiddle ! You can see that it works perfect:

 

http://jsfiddle.net/GRA89/17/

 

As written above, it should be loaded in Protected mode as we do in our latest plugin version.

 

Thanks a lot,

 

ThemePunch

Share this post


Link to post
Share on other sites

Please see it here:

 

http://jsfiddle.net/GRA89/18/

 

I load TweenLite than i load TweenMax. It works.   You load TWeenLite, than you load Tweenlite again and TweenMax.  This can not work.  

 

Please take a look and study my example.

 

Thanks a lot,

 

ThemePunch

Share this post


Link to post
Share on other sites

Hi Themepunch,

 

Are you kidding???? Did you even clicked the fiddles, I have posted??? or are you trying just to post to say you are right:

 

 

http://jsfiddle.net/GRA89/16/

Share this post


Link to post
Share on other sites

Hi,

 

I load a version of TweenLite( 1.11.... ) Then i want to load TweenLite(1.12) and TweenMax(1.12)

 

Simple.

 

1) Load TweenMax and after that Load TweenLite : IT WORKS: http://jsfiddle.net/GRA89/22/

 

2) Load TweenLite and after that load TweenMax: IT DOESN'T WORK:http://jsfiddle.net/GRA89/23/

Share this post


Link to post
Share on other sites

I load TweenLite and then i load TweenMax.  The Solution is posted by GreenSock in 3 differen Posts already, and looks like (or in the fiddle i posted above) :

<script>
     var gs = window.GreenSockGlobals = {}; 
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TimelineLite.min.js"></script>
<script>
     window.GreenSockGlobals = window._gsQueue = null;
</script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js"></script>


To refer on TweenLite you will need to call gs.TweenLite and to call TweenMax you will need to call TweenMax...   As shown in the example  http://jsfiddle.net/GRA89/18/

 

A solution like you wish only possible if GreenSock solve this internally within his engine.  

 

I dont think they will do that.  

 

We hunt for a perfect solutions for a while also, but right now this is the correct direction. 

 

Thanks for your understanding,

 

ThemePunch

  • Like 2

Share this post


Link to post
Share on other sites

Hi themepunch,

 

But why are you still posting the same answer if i am asking something else?

 

Cheers,

MT

Share this post


Link to post
Share on other sites

ThemePunch, thanks for helping out. You are exactly right, if MT chooses to sandbox all of the GSAP scripts he needs in a GreenSockGlobals object that will protect him from third-party plugins loading scripts that mess up his theme. (basic demo)

 

However, MT has brought to light an issue of simply loading TweenLite and then TweenMax (same version) causing the problem of TweenMax being undefined. Technically you should never need to load TweenLite and TweenMax (regardless of order) as TweenMax literally contains TweenLite. Still I imagine there are occasions where this could happen.

 

Let us look into this further and we will get back to you both with more info.

 

FWIW we probably do not want to have logic built in where a "newer version" automatically overwrites an "older version" as we always want to respect legacy code. I'm sure neither or you would be too happy if 6 months we released a new version of TweenMax that didn't work with the code you are writing today.

  • Like 3

Share this post


Link to post
Share on other sites

Finally :ugeek: 

 

Yes i don't need TweenLite to be loaded. But i found this loading error while trying to figure out why a plugin that was loading only TweenLite got me TweenMax undefined.

 

I will use a sandbox so my code uses my version of TweenMax

Share this post


Link to post
Share on other sites

To avoid that problem that Carl mentioned above (where if you load TweenLite and then TweenMax, TweenMax will be undefined), simply add this line of code once (after the loads):

if (window._gsDefine && window._gsQueue.length) { window._gsQueue.pop()(); }

We'll add this to the next release of GSAP internally so it shouldn't be necessary for you after that point, but this line would help with legacy stuff. 

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

 

Thank you Jack. Any timeline for the next release?

 

Cheers,

MT

Share this post


Link to post
Share on other sites

Probably next week. If you want a preview, I can send one your way. 

 

We're just working on adding some features and tweaking a few things. 

Share this post


Link to post
Share on other sites

No, that is perfect. Thank you once again!

Share this post


Link to post
Share on other sites

Hi,

 

I was trying to play with the GSPreloader function but it seems TimelineMax was not working. I have added gs.TimelineMax but i get another error: "uncaught exception: Cannot add [object Object] into the timeline; it is not a tween, timeline, function, or string."

 

http://jsfiddle.net/GRA89/38/

 

 

tl = new gs.TimelineMax({repeat:-1, repeatDelay:0.25});

 

It seems that gs.TimelineMax is working as you can see the animation. But inside the GSPreloader it isn't.

 

MT

Share this post


Link to post
Share on other sites

Thanks for the fiddle, very helpful.

 

I have a theory and a fix.

 

It appears the error was stemming from the fact that you were trying to place a gs.TimelineMax into a regular TimelineLite (not gs.TimelineLite)

 

The error was triggered here:

//stagger its placement into the master timeline
    animation.add(tl, i * 0.07);

animation is TimelineLite and tl is gs.TimelineMax

 

So the fix is to make animation a gs.TimelineLite you can do this on line 51 like so

animation = new gs.TimelineLite({paused:true}),

here is an updated fiddle: http://jsfiddle.net/zu18gs62/1/

 

If you need more help or details let us know.

Share this post


Link to post
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.