Jump to content

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

GSAP animations and Joomla! 2.5, 3.x

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

Trying to use some TweenMax animations on a couple of Joomla! sites, versions 2.58 and 3.x


I ordinarily just add the TweenMax.min.js to a site somewhere in the headers, and it's no exception with Joomla. A custom template, code inserted into the index.php file, thusly:


<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/TweenMax.min.js"></script>


That apparently works without tripping up anything. But when I try to use a small .js file with theTweenMax script (inside a Joomla custom module)  that relies on the TweenMax code, nada.


Nothing much around here that addressed this issue. Does anyone have some idea of how to make TweenMax behave with Joomla?





Link to comment
Share on other sites

By the looks of it, it looks like TweenMax is being called just before the head close ... perhaps your module's JS is being called before TweenMax.

  • Like 2
Link to comment
Share on other sites

With Joomla its always best to place your TweenMax JS and other custom JS at the bottom of your templates/[theme_name]/index.php before your body tag. Any JS added through modules will be added via the joomla addScript() method, and that gets added to the head tag with <jdoc:include type="head" />.


You can either add TweenMax JS before that <jdoc:include type="head" /> call or just place all your custom and Tweenmax scripts in the footer before the body end tag in your index.php.




Link to comment
Share on other sites

Thanks for the tip - but still no joy. I've inserted the Javascript like this, in the template's index.php file:


<jdoc:include type="modules" name="debug" />
        <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/TweenMax.min.js"></script>
        <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/news_ticker.js"></script>


I am not exactly sure what's going on at this point. A look at the site via the browser's Console tool show no JS errors.

Link to comment
Share on other sites

Have you tried to make sure that the DOM is ready before running your animation?


Leave TweenMax and news_ticker.js in the bottom before you ending body tag. Then wrap your custom GSAP code in the below to make sure you only run the code after the DOM is ready and the window is loaded.

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

      // wait until images, links, stylesheeets, scripts, and assetes are loaded
      window.onload = function() {

            // custom GSAP code goes here



Also in the browser console and inspector check the order your scripts are being loaded in the network or the resources panel.


See if that helps?

Link to comment
Share on other sites

Thanks, but that doesn't seem to do anything. Oddly enough, I was able to get this TweenMax code working (

See the Pen MKgrKr by MAW (@MAW) on CodePen

) on a large e-commerce site that was apparently written with a "casual" attitude toward HTML5 coding. No big deal - add a line to load TweenMax.min.js to the bottom of the page, insert the small piece of JS, and I was good to go.


With Joomla!, it seems that there is something else afoot. I have added other Javascript to the site without any problem, but for some reason, TweenMax is proving difficult. There are no JS errors being reported.


I really need to update this Joomla! site to 3.x, but the upgrade is a real minefield of incompatibility problems with some of the extensions currently being used.

Link to comment
Share on other sites

I totally understand about Joomla! Joomla is on my second most hated list, with IE being number 1.


Did you look in the browser network panel to make sure the order of the scripts being loaded is right? .. see if you can take a screen shot of that or if you want to share the link to your site?

Link to comment
Share on other sites

I'm going to check on that later when I can get back to this thing.


I used to really enjoy working on Joomla! sites, but lately the whole upgrade thing has been an enormous burden. The upgrades proceed pretty simply until you reach a level where the templates don't "translate" and you have to go in manually fuss with the db.


But for many things that require things like custom PHP scripting and ease of editing - except for system updates - Joomla! is still on my list. I do a lot of Wordpress development as well, but that's another story...


My "other" plan is to try and get GSAP working on my Joomla! test platform, and then puzzle out why it doesn't work in the site I'm editing.


Thanks again for your help!

Link to comment
Share on other sites

I moved to WordPress after the Joomla 2.* .. WordPress is way more friendly and more fun to customize than Joomla. It has a great API and docs.. and is better for SEO than Joomla is.. as far CMS goes IMHO :)

Link to comment
Share on other sites

I'm getting to like WP more and more. For sites that don't need a lot of complicated forms and such (I use Fabrik with Joomla! sites for this...) I use WP frequently. I haven't had much opportunity to examine what the current level of (plug-in derived, I guess) ACL that WP might offer. With a lot of users/rights, Joomla! seems to be the logical choice.

Link to comment
Share on other sites

For user rights and roles in Wordpress you can use the any of these WP Plugins

i personally use Members WP Plugin on my WordPress sites for giving users different roles and permissions.



Link to comment
Share on other sites

I had sort of similar problem while using TweenMax in Joomla, I was using firefox and it didn't show any errors in console window. The problem was due to MooTools which you can solve by setting jQuery as selector for TweenMax,

TweenLite.selector = jQuery;
Link to comment
Share on other sites

  • 3 weeks later...

Thanks. I did some experimenting on a Joomla 3.4 site under development, and since MooTools apparently isn't being loaded by anything, TweenMax works perfectly, as expected. I suspect you have figured out why it didn't work with the earlier 2.54x version.


I am in the midst of some year-end site updating, and boy, Joomla! is no simple matter when it comes to this stuff! Virtually EVERYTHING needs to be fixed or changed, aside from importing of users and articles. VERY time consuming.


I finished updating the 3 or 4 Wordpress sites I run, and that took maybe five minutes apiece to get to the latest versions. No messing with incompatible menus or non-importable modules, etc.


Very different tools, I guess.

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.