Greensock works on one page but not the other!

[Dr Fingerless]

Here's a curious thing. I am fairly new to Greensock but loving it as much as most others seem to. I have created an animated cartoon sequence which works well when tested offline. I embedded all the HTML, JS and CSS into one of my Wordpress sites on a test page and it works beautifully. You can see it in action here - Test page. But once that page tested well, I put it into its proper location on the homepage (about half way down the page at www.schoolkit.org.au) and low and behold it fails! Well sort of... You will see that it seems to load well and you can click on the Start button, but then you notice other layers of content appearing and the animation controls become dysfunctional. When I check the console I see the following errors in TweenMax.min.js of 'TypeError: g is undefined' repeating themselves. Also '11TweenMax.min.js:14 Uncaught TypeError: Cannot read property 'length' of undefined'.
I am a little unsure of myself with Javascript to be able to troubleshoot this. Does anyone have any suggestions for why this animation works on one page and not on another? For the benefit of Wordpress users I have deactivated all my plugins to check for compatibility issues but no improvement. Any genius's out there with some ideas?

If anyone would like to see the code in codepen I will set it up but not sure if that is necessary. The code seems to be good. It's something else...

[Jonathan]

Hello Dr Fingerless

 

It sounds like your trying to run your custom GSAP code when the DOM isn't ready. You should only run the code when the DOM and window is ready and loaded. That's probably why it shows Cannot read from property length of undefined. Like the element isn't ready so it returns undefibded and no length. Are you loading TweenMax.min.js so it loads in the footer and then have your custom code load after that.

 

If you set up a codepen we can help you better to see your code where we can edit live.

 

Thanks

[Dr Fingerless]

I'll set up the codepen, Jonathan. Just one question though...if it comes down to the order in which the JS files are loading why does it work on the test page but not on the homepage when they both load the JS files in the same sequence.
Yes, I am loading TweenMax.min.js in the footer and then my custom code loads after that, as in:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="/wp-content/js/comic.js"></script>

[Jonathan]

You wont need the CSSPlugin.min.js if you are loading TweenMax.min.js, since it it is included for convenience in TweenMax. Are you loading the scripts via WordPress enqueue_script() method?

 

WordPress enqueue_script() method: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

 

[WarenGonzaga]

Hello Dr. Fingerless!

 

I dont have idea how could you make a post without fingers? LOL

Anyway we required here to post your codepen so anyone could understand your problem!

Welcome to the forum!

 

Nice shot Jonathan

[Dr Fingerless]

Hey Warren, it ain't easy believe me...but practice makes perfect!
I feel like I'm skating on the thin ice of inexperience here - the depth of the water below is increasing and I might go under!

Jonathan, I've heard of the enqueue_script() method but I don't have experience of how to use it. So the answer to your question would be no, I have not loaded the scripts using that method. And thanks for the tip on the redundancy of the CSSPlugin.
I've created a codepen. It's my first ever codepen and I suspect that will be obvious. Treat my noobishness with some gentleness please. I want to learn.
Codepen:

See the Pen gwLaaN by drfingerless (@drfingerless) on CodePen

While my HTML, CSS and JS are all visible there, they don't talk to each other so you can't run the actual animation. I have cobbled this animation together by looking at what others do and in some cases copying and pasting their existing script content. This may mean that I don't understand it as well as I might.

[Jonathan]

Hello Dr Fingerless,

 

If you are developing a WordPress theme or customizing a WordPress theme, you can add your JS file within your WordPress functions.php file. Add this to your functions.php file

<?php
// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
    wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/wp-content/js/comic.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

The last parameter shows true which means WordPress will add the JS file to the footer instead of in the head,

 

Here is the link for more information on enqueuing JS files in WordPress:

 

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

 

Hope this helps!

[Dr Fingerless]

Thanks Jonathan, I have now successfully enqueued the js and css files. There was a little tweaking to be done as your example had the TweenMax.min.js and the comic.js with the same 'gsap-js' ID which the script did not like but once I changed the second ID to a unique value it seemed to place the scripts correctly.
But the sad thing is that I am still at square 1. The scripts are being called but while they work on this page http://schoolkit.org.au/test-page/ they still do not work properly on the homepage http://schoolkit.org.au/. Do you have any other thoughts? Is my codepen useful at all?

[Jonathan]

Hello Dr Fingerless,

 

The reason i add both GSAP TweenMax.min,js and comic.js in the same WordPress enqueue array(), is so you guarantee that comic.js runs after TweenMax.min.js.

 

It looks like you were having issues since custom code in comic.js needs to be wrapped in a DOM ready event and a window.onoad event to make sure that your code only runs when the DOM and window are fully ready and loaded.

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until all images, links and css are loaded
  window.onload = function(){
      
        // custom comic.js code goes inside here
  
  };
  
});

[Dr Fingerless]

Jonathan, I have followed what I believe to be your instructions but I now get a complete blank where the animation should load. What am I missing here? The new comic.js file wrapped in your DOM eventListener is attached. Is this how it should be configured?

[Dr Fingerless]

I've reconfigured comic.js so it does load properly (my fault) and now the JavaScript is being called successfully. But we are once again back to the starting point in this process. The animation works fine on the test-page but not on the homepage of the site.

[Jonathan]

When you look at your WordPress site and view in the DOM inspector and network panel for JS. Do you see that your scripts are loading in order and that your scripts are loading in the footer?

 

Even though this is more of how to load JS in WordPress question.. rather than a GSAP API question. It is really hard to know what and how everything is loading without a link to your site. Plus I don't know if your using a child theme which could have an affect on what is loaded with a theme or template file. Seems like you have a different theme or template file for your homepage than the other pages.

 

Also I would suggest you read up on the WordPress Codex it goes over how to load JavaScript files... great stuff on how to use WordPress and it's API.

 

Using JavaScript in WordPress:

https://codex.wordpress.org/Using_Javascript

 

Include CSS & JavaScript in WordPress:

https://developer.wordpress.org/themes/basics/including-css-javascript/

 

[Dr Fingerless]

Jonathan, thanks for your ongoing help with this issue. You say in your last post that 'without a link to your site' you are unable to know what and how everything is loading. If you look back over my posts you will see links to my site where these problems are occurring mentioned a few times.
The page where the animation is working well is http://www.schoolkit.org.au/test-page and the page where the same animation sits (about halfway down the page) that seems to load and start working but then becomes dysfunctional is the homepage i.e. http://www.schoolkit.org.au. Both pages display the same HTML and link to the same CSS and JS files.

[Jonathan]

Is the test page and the homepage using the same theme template file and theme or child theme?

[Jonathan]

I see what the issue is. When testing loading you should always insect the browser console and network tab to see what is being loaded and for errors.

 

On the test page jQuery is being loaded homepage. But on the homepage there is an error in the console. A 404 not found for file jquery.min.php.

 

Shouldn't that be jquery.min.js?

http://elghandkly.com/js/jquery.min.php  // 404 Not Found

Fix that issue and your animation will work.

 

You can open the browser console by hitting F12 in your browser.

 

[Dr Fingerless]

Jonathan, I do use the console but I'm not an expert in the debugging process. I looked through the console, network tab and the source code for the homepage and cannot find any references to jquery.min.php anywhere. The console doesn't reveal any 404 errors that I can see. And I can't find any references to elghandkly.com anywhere. Can you give me a bit more direction?

[Jonathan]

you have a bigger issue.. you better check your WordPress plugins and theme files since that jquery.min.php is a sign of malware

 

https://blog.sucuri.net/2015/11/jquery-min-php-malware-affects-thousands-of-websites.html

 

your gonna need to scan for virus and malware on your WordPress directories and files!

 

I deleted your comic zip file above since it has possible malware / virus due to the jquery.min.php

 

Thanks

[Dr Fingerless]

Jonathan, can you just give me some pointers about where you found jquery.min.php? I cannot find it anywhere.

[Jonathan]

If you cant find it was deleted by your virus scan since it was infected so when wordpress loads it cant find it anymore.

 

At this forum we have to stay focused on the GSAP API. There is so much i can do since technically this is a WordPress issue and not a GSAP API question. And it is impossible to for me to debug or check for that issue since i personally have not experienced this malware issue.

• So I suggest you read that article i posted above to thoroughly clean your wordpress theme and plugin files.
• Check your header.php for that.
• Do an entire search in your local files as well as the files on your remote server.
• It also has a link in that article on a free malware scanner to scan your wordpress site. 

You might have to also change your wordpress passwords since this type of thing is a sign your website got hacked. If i were you I would contact your hosting company!

[Dr Fingerless]

Fair enough, Jonathan. I followed your instructions and the site got the 'all clear' from free Sucuri SiteCheck malware scanner.

I also checked the header.php file - all good - and changed the passwords on the two admin accounts. Do you have any tips about where I might go to see if I can work out what is continuing to cause the homepage problem with the GSAP animation? I guess you are confident that the problem is not with GSAP as such - it seems to be with the way Wordpress is loading the JS files. But the strange thing is I presume it loads them the same way on each of the two pages that I have provided URLs for, and yet they behave differently. There is something unique about that homepage that is disrupting the GSAP display while it works just fine on the test-page. Same website, same template, same GSAP HTML, JS and CSS. Different results.

[Jonathan]

WordPress comes packages with jQuery. So your issue is that jQuery is not being loaded on the homepage due to that hack you had replacing jquery.min.js with jquery.min.php. So I would check all your WP plugins and uninstall and remove anything that could affect it. Make sure to update WordPress and all WP plugins.

 

Try this out to:

 

https://premium.wpmudev.org/blog/beware-fake-jquery-calls-in-wordpress-plugins-from-the-repo/

 

You can probably add this to your functions.php, to pull jQuery from CDN, but you will have to test

// force jQuery to load from Google Library CDN
function replace_jquery() {
    if (!is_admin()) {
	// comment out the next two lines to load the local copy of jQuery
	wp_deregister_script('jquery');
	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3');
	wp_enqueue_script('jquery');
    }
}
add_action('init', 'replace_jquery');

If you need jQuery version 3.1.1 then use that instead.