TweenMax is not defined

[ADawn]

I am using Wordpress and am loading TweenMax via the functions.php file like this:

add_action('wp_enqueue_scripts', 'child_scripts');
function child_scripts() {
    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js');
    wp_enqueue_script('main-js', get_stylesheet_directory_uri() . 'main.js', array('gsap'), false, true);
}  

Both <script> tags are showing up fine and in the correct order in the page source code after load and there are no loading errors for either resource. I am trying to use TweenMax with the typical TweenMax.to() statement in the above referenced main.js file, but I am getting the "TweenMax is not defined" error that usually indicates that I forgot to include the library.

 

It happens even after all plugins are deactivated and when using the 2016 theme. I have used TweenMax many times before and have never run into this issue.

[Carl]

Hi,

 

Sorry to hear you are having problems. I'm not familiar with the intricacies of wordPress. Seems many people load TweenMax in this fashion without problems.

Do you have a link to the site or a test page we can peek at? The simpler the better. 

[ADawn]

Do you have a link to the site or a test page we can peek at? The simpler the better. 

 

Thank you for your response Carl. I'm sorry, I can't link to this specific site, and all my test pages work as expected. Codepens work as expected. Clean WordPress installations work as expected. The problem seems to be unique to this setup. I know it was a long shot asking for help without being able to link to the project. I had hoped there was someone who had run into this already and could help me with a new direction for troubleshooting.

[Jonathan]

Since you cant let us see your site.

• Are you seeing any errors or warnings in the browser console?
   
• Do you see TweenMax loading in the DOM as well as your main.js file?

Based on your example above TweenMax.js is loading in your head tag and not before the ending body tag. But it will be near impossible to see what is going without seeing any code or your website for reference.

 

I would suggest you also check out the Wordpress Codex on how to add JavaScript files to WordPress.

 

Using JavaScript inside WordPress:

 

https://codex.wordpress.org/Using_Javascript

 

wp_enqueue_script method:

 

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

 

Also make sure you adding TweenMax.min.js and your main.js with the same array so they get added one after another

<?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/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
?>

And you should change this '/main.js' to this '/wp-content/js/main.js' .. your missing the wp-content/js path for your theme

 

Try to use get_template_directory_uri() instead of get_stylesheet_directory_uri() and see if that helps?

• get_template_directory_uri()
  Codex: Retrieve template directory URI for the current theme. Checks for SSL. Note: Does not return a trailing slash following the directory address.
   
• get_stylesheet_directory_uri()
  Codex: Retrieve stylesheet directory URI for the current theme/child theme. Checks for SSL. Note: Does not contain a trailing slash.

Happy Tweening

[ADawn]

There are no errors in the browser and the TweenMax script tag shows up in the DOM after page load with no problems. The main.js file is also loading in the footer as intended. Using the get_template_directory_uri() will get me the directory for the parent theme, whereas my main.js file resides in a child theme, with the path /wp-content/themes/venedor-child/js/main.js. Based on the script links that are present in the DOM after the page has loaded and the fact that there are no 404 errors associated with either script, it appears that I am referencing my JS correctly. No other errors show up in the console either.

 

I am also checking with the Wordpress and theme support communities and will post the fix if I find it . Thank you for the response Jonathan.