Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Fanho

TweenMax stopped working after upgrading Joomla 3.2

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

Hello,

I was almost done building a site that relied a lot on TweenMax for animation and Interactivity. The site is buildt on Joomla. This morning after I upgraded from Joomla 3.14 to Joomla 3.2, all my scripts and animation based on Tweenlite and tweenmax stopped working!!!

The site can be viewed
http://www.intek.jp/index.php

 

This is an older version of the same site when everything was still working fine.

http://www.inflowmotion.net/intek/ja/business-domain-jp/sensor-jp/application-jp/parking-jp.html

Any idea what could cause the conflict or how to debug this kind of problem?

 

Thank you.

Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums!

 

This doesn't look like a GSAP issue.. but more of a jQuery conflict with the factory symbol $() and the removed jQuery $.browser() method from the previous jQuery version from your old site. Errors are being thrown in the console which are related to jQuery, which has caused the page to stop on that error.

 

REGARDING YOUR OLD SITE:

 

When i look at your old site it is throwing an error in the console regarding the factory symbol $()

ReferenceError: $jp is not defined
http://www.inflowmotion.net/intek/ja/business-domain-jp/sensor-jp/application-jp/parking-jp.html
Line 1

TypeError: $ is not a function
http://www.inflowmotion.net/intek/ja/business-domain-jp/sensor-jp/application-jp/parking-jp.html
Line 1

That usually has to do with which JavaScript library conflict with the factory symbol $, the dollar symbol. So there might be another JavaScript library like jQuery that is trying to claim the factory symbol.

 

NOTE: The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().

 

REGARDING YOUR NEW SITE:

 

As far as your new Joomla site and TweenMax not working...  that is happening due to the jQuery version you are using that doesn't support the jQuery.browser() method. You are using jQuery 1.10.2. in Jooomla 3.2. 

 

And If you look at your console you will see that an error is being thrown.

TypeError: $.browser is undefined
http://www.intek.jp/plugins/system/t3/base/js/off-canvas.js
Line 15

Looks like the script file off-canvas.js is trying to reference the jQuery $.browser() method, but it has been removed from jQuery as of version 1.9, and has been deprecated since version 1.3.

 

http://api.jquery.com/jQuery.browser/

 

Solutions:

 

there are a couple of things to do for this .. 

  1. Either update that off-canvas.js so it uses the latest jQuery methods, since the conflict is with this script using a removed jQuery method $.browser().
     
  2. Download and include in your site the $.browser method that has been ported over to a standalone jquery plugin, found here: https://github.com/gabceb/jquery-browser-plugin
     
  3. Or use a jQuery version 1.8, which you might not be able to do so since Joomla 3.2 came packaged with the latest jQuery 1.10.2

I hope this helps! :)

  • Like 4
Link to comment
Share on other sites

Nice work Jonathan - I'd just add that for maximum backwards compatibility, jQuery also has their own Migrate plugin that restores the features that were removed in 1.9

  • Like 2
Link to comment
Share on other sites

Hello,
Thanks a lot Jonathan and Jamiejefferson for looking into the issue and giving me all this great information. You guys rock!

I tried what you recommended but without luck.
 

First about the migrate plugin, Joomla 3.2 includes it by default. Maybe you didn't see because I took it off for a while. But all the GSAP was blocked when it was running as well.

 

I tried removing off-canvas.js and/or including $.browser but that didn't solve it either.

 

So I decided to do the opposite and go back one step and redeployed my site before the Joomla 3.2 Update. And I only updated Jquery to 1.10.2.

You can see the site deployed at

http://www.intek.jp/index.php

It's running with Jquery 1.10.2 and also I added jquery.browser.min.js , I still get the $.browser error but all the GSAP stuff is running fine!!!

So I guess the conflict must be happening somewhere else?
I'm no expert in debugging Jquery conflicts so any help is greatly appreciated.

Thank you again.

Link to comment
Share on other sites

Hello Fanho..

 

Glad to hear TweenMax is working again!

 

It looks like that the off-canvas.js is still having issues ..

 

The Joomla T3 Framework has its own jquery.noconflict.js that is used with T3 Framework.. and off-canvas.js is part of the T3 Framework.

  • Have you tried updating the T3 Framework?
  • Do you have the latest T3 Framework for your version of Joomla?

When i look at the latest T3 Framework on git, the off-canvas.js is different than the one you are using on your site, and doesnt use jQuery $.browser():

 

https://github.com/t3framework/t3

https://github.com/t3framework/t3/blob/master/source/plg_system_t3/base/js/off-canvas.js

 

:)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

 

I fact I was still running the older T3 frame work 1.2.3
 

I updated it to the T3 1.4.3 version and Bam all the GSAP script stopped working.

After that I updated Joomla to 3.2 but that din't fix it either.

What is funny is that the console doesn't give me any  JS error!!! But yet all the GSAP is blocked!!! SO maybe it's not a Javascript error???
All the GSAP scripting is in barmenu.js

 

The Joomla 3.2 with T3 1.4.3 framework version of the site can be seen here.

 

http://www.intek.jp/intek/index.php

I'm really not getting it!!!

:?

Link to comment
Share on other sites

There is no error here, but your upgrade has changed the $ element so now your selections are no longer targeting their elements. All of your tweens are setup like TweenMax.to('#someid', ...) - this works if jQuery is the $ selector but you've got Mootools there as the $ selector (no idea if its new to the upgrade or something else has changed). Mootools selector doesn't use # in front of the ids, so your tweens will only work like TweenMax.to('someid', ...).

 

I'm not a joomla or t3 guy, so you'll have to figure out how to handle this one.

 

By the way, GSAP detects the selector in this order when it is first loaded:

window.$
window.jQuery
// if neither, wait until the first selection happens
window.$
window.document.getElementById
  • Like 2
Link to comment
Share on other sites

Hello again..

 

When I develop for Joomla i try to avoid the Frameworks since there are too many , like 10 Joomla template frameworks. Gantry, Warp, Gavern, Zen Grid, Helix, Construct Template, Morph, JV framework, Wright and our T3 framework. (I think out there are even more). Becuase each Template developer wants to show there Joomla Framework is better. That is why for me i like Wordpress better than Joomla, but that is my personal preference.

 

So my question to you is:

  • Are you even using the Joomla T3 Framework?
     
  • Can you post your custom JS code you are running in Joomla that you say you are having issues with. So this way we can see what your custom code looks like with all your Tweens, so we can better help you?

Joomla by default uses the MooTools JavaScript library. jQuery is a secondary JavaScript library so that is why Jamie and I were advising on the conflicts about the factory symbol $. MooTools has ownership of the factor symbol.

 

Whats happening is.. if you look at the order your JS scripts get loaded. You will see this as the order:

  1. jquery.min.js
  2. jquery-noconflict.js
  3. jquery-migrate.min.js
  4. mootools-core.js

Notice how mootools-core.js is last. What is happening is that jquery.min.js core gets loaded first and then jquery-noconflict.js. So when mootools-core.js loads it takes over the factory symbol.

 

What you can try is to see if you can control where the jQuery scripts load, either in the head or before the body, so its after the MooTools mootools-core.js. I know Wordpress allows you to control where you want your JS script loaded.

 

You say that your animations have stopped, when all Joomla files are up to date. Why not have your Joomla Site up to date with all the latest files. And then make your custom code with tweens reference any jQuery $() factory symbol with jQuery().

 

So what you can do when working with Joomla and jQuery is instead of using $() use jQuery(), and you wont have the $ conflict. So this way you are always using jQuery() to reference the factory symbol, instead of $(), and then you dont have to worry about conflicts.

 

If you dont use jQuery() then you have to use jQuery noConflict() again before your jQuery custom code.

 

http://api.jquery.com/jQuery.noConflict/

<!-- Another way to put jQuery into no-conflict mode. -->
<script src="mootools-core.js"></script>
<script src="jquery-min.js"></script>
<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
           // You can use the locally-scoped $ in here as an alias to jQuery.
           $( "div" ).hide();
});

// The $ variable in the global scope has the mootools-core.js meaning.
window.onload = function(){
       var mainDiv = $( "main" );
}
</script>

Either you have to use jQuery.noConflict() before your custom jQuery code, or always have to use jQuery(), instead of $().

 

And then you wont have the issues your seeing in Joomla.

 

I hope this helps!

 

:D

Link to comment
Share on other sites

Hi Jamie and Jonathan,

 

Thanks again for your help, I really appreciate it.
 

I think the problem is defenetly caused by a conflict with Mootools.

All my GSAP code is done with JQuery() and not $() because that what joomla handels best.

If I look at www.intek.jp/index.php where all the GSap script is working fine, Mootools was loaded in last position after all the Jquery and Gsap scripts.

On the site at www.intek.jp/intek/index.php after the T3 frame work update and updating to Joomla 3.2 Mootools get loaded right after Jquery.min.js and before all the GSAP script.
 

As a test I removed mootools-core.js and that did the trick.

Now I need to see if I even need mootools at all or find a way to load it after but I won't have much time to work on this today.

I'll keep you guys posted.
Thanks again.

Link to comment
Share on other sites

There's one other trick I didn't think of before that would allow you to make sure GSAP uses the jQuery selector instead of defaulting to $. Just run this before creating any tweens (and after jQuery has loaded):

TweenLite.selector = jQuery;

Sorry I didn't think of it sooner ^_^

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Ok,
Final solution for  me was the following.
The conflict came from loading Jquery and Mootools together. If not loading mootools all was working fine with GASAP. BUT... my template is using mootools for the slider navigation in Mobile view.

So I used Mootools enabler/disabeler plugin from Joomla extention to disable Mootools at first.
And added a Javascript in my footer to load mootools after everything else.

This is working for my site.
Hope it will help other debugging this kind of issue.

Thanks to everyone who helpped participating in this thread.

Cheers

  • Like 2
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.
×