Jump to content
Search Community

Order loading TweenMax and TweenLite error

MT test
Moderator Tag

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

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

Link to comment
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

Link to comment
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

Link to comment
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

Link to comment
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
Link to comment
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
Link to comment
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

Link to comment
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
Link to comment
Share on other sites

  • 3 months later...

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

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

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