Jump to content
Search Community

ReferenceError: TweenMax is not defined

Lauran999 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

Dear All,

 

I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox:

ReferenceError: TweenMax is not defined

In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work:

		wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true );

		//LAURAN BEGIN////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
		//wp_deregister_script( 'TweenMaxMin' );
		wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true );
		wp_enqueue_script( 'TweenMaxMin' );
						
		//wp_deregister_script( 'ScrollMagic' );
		wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true );
		wp_enqueue_script( 'ScrollMagic' );
		
		//wp_deregister_script( 'animationGsap' );
		wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true );
		wp_enqueue_script( 'animationGsap' );
		
		//wp_deregister_script( 'debugAddIndicators' );
		wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true );
		wp_enqueue_script( 'debugAddIndicators' );
			
		//wp_deregister_script( 'lauranScrollMagic' );
		wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true );
		wp_enqueue_script( 'lauranScrollMagic' );
		
		//LAURAN EINDE/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

And this is my script:

//jQuery(document).ready(function($){
jQuery(document).ready(function(){

        // place custom JS here
        console.log("DOM ready");

        // window, links, and other assets loaded
        jQuery(window).on("load", function(){

              // or place custom JS here to make sure DOM is ready and the window is loaded
              console.log("window, links, and other assets loaded");
              
              var images = [
 	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png",
	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png",
	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png",
	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png",
	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png",
	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png",
	"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png"
];

// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};
// init controller

// create tween
var tween = TweenMax.to(obj, 0.5,
	{
		curImg: images.length - 1,	// animate propery curImg to number of images
		roundProps: "curImg",				// only integers so it can be used as an array index
		repeat: 3,									// repeat 3 times
		immediateRender: true,			// load first image automatically
		ease: Linear.easeNone,			// show every image the same ammount of time
		onUpdate: function () {
		  $("#myimg").attr("src", images[obj.curImg]); // set the image source
		}
	}
	);



var controller = new ScrollMagic.Controller({loglevel: 3});
// build scene

var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220})
	.setTween(tween)
	.addIndicators() // add indicators (requires plugin)
	.addTo(controller);

var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"})
	.setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween
	.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
	.addTo(controller);

var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300})
	.setPin('#blockLauran')
	.addIndicators()
	.addTo(controller);

var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200})
	.setPin('#blockLauran2')
	.addIndicators()
	.addTo(controller);


              
        
        });

});

All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme.

 

Can someone help me out? It looks like if I am almost there...

 

Thanks!

 

Lauran

 

 

Link to comment
Share on other sites

Hi Lauran and welcome to the GreenSock forums.

 

One way to check the presence of GSAP is typing this in the developer tools/firebug console:

window.TweenMax

That should return the main function of the TweenMax constructor on the console, which means that the script is indeed present in the site.

 

For what I can see in your code the issue might be that you're not registering the dependencies of the scripts. This means that even though all files are being loaded, their not being loaded in the correct order, so your file (lauranScrollMagic1.js) is being loaded before TweenMax.

 

Perhaps this could fix the issue:

wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'TweenMaxMin' );
						
//wp_deregister_script( 'ScrollMagic' );
wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array('TweenMaxMin', 'jquery'), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'ScrollMagic' );
		
//wp_deregister_script( 'animationGsap' );
wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'animationGsap' );
		
//wp_deregister_script( 'debugAddIndicators' );
wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'debugAddIndicators' );
			
//wp_deregister_script( 'lauranScrollMagic' );
wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array('TweenMaxMin','ScrollMagic'), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'lauranScrollMagic' );

Like that you'll ensure that jQuery, TweenMax and ScrollMagic are loaded before your code.

 

Here's the reference to the WordPress codex:

 

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

 

Let us know if this fix the error.

  • Like 2
Link to comment
Share on other sites

Dear Rodrigo,

 

First of all thank you for your quick reply. I highly appreciate it!

 

I tried several things:

 

1. Typing

window.TweenMax

in the firebug console resulted in the following message:

window.TweenMax
undefined

But if I look at the html source code, I can see all scripts being listed in the footer in the right order (as enqueued in the functions.php file). So that looks strange.

 

2. Indeed in can have to do with dependencies. I am trying out several things with that atm.

 

3. I was reading here: https://codex.wordpress.org/Function_Reference/wp_enqueue_script about $depts, it says the following which I do not completely understand:

 

This parameter is only required when the script with the given $handle has not been already registered using wp_register_script().

 

Do you know if this has to do with it? So that it might have to do with not registering when you are writing it as a dependency of another script?!

 

Do you have a suggestion?

 

Thanks!

 

Lauran

Link to comment
Share on other sites

Hi Lauran,
 
Sorry to hear that the trouble is persisting.
 
Now if window.TweenMax returns undefined, that means that the file is not being loaded, as simple as that.
 
If you open dev tools/firebug console in this site and type that you should see the following:

//Chrome 43 on windows 7
window.TweenMax
function r(enMax, core, core, TweenLite, s, f, n, n)

//Firefox  on windows 7
window.TweenMax
function(t, e, s)

Without more information about this is hard to find the cause of the error you're getting. Perhaps what you could do in your header.php file is include a simple HTML <script> tag with the route to TweenMax and see if that solves it. I know this goes against WordPress' good practices, but is just o see if then GSAP will be present. Also check the route to your JS assets as well.
 
Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo,

 

Thanks again for your quick reply:)

 

1. I tried the HTML <script> option: IT WORKED:D  Again a step closer to the solution:) Now I am really certain that the script is not being loaded through enqueueing/registering in the functions.php.. I added this to the header.php fyi:

<!DOCTYPE html>
<?php global $smof_data, $woocommerce; ?>
<html class="<?php echo ( ! $smof_data['smooth_scrolling'] ) ? 'no-overflow-y' : ''; ?>" xmlns="http<?php echo (is_ssl())? 's' : ''; ?>://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
	
	<!--START LAURAN-->
		<script type='text/javascript' src='http://bakkershuysje.nl/blog/wp-content/themes/Avada/assets/js/1lauran/TweenMax.min.js?ver=3.8.4'></script>
	<!--END LAURAN-->

2. I checked the route to the js asset: That looks completely fine..

 

3. I set up a test website, (it is working now because I left the HTML <script> tag in the header.php. You can take a look if you like;)

 

http://www.bakkershuysje.nl/blog/

 

Tomorrow I will do some more testing and then I will get back here!

 

Lauran

Link to comment
Share on other sites

I simply cannot figure it out, I tried adding/removing different dependencies in the functions.php file. But it seems like it only wants to work when the script is added in the header.php...

 

Could you give it a check: http://www.bakkershuysje.nl/blog/ ?

 

Does it have to do with this: "Probably the biggest update in ScrollMagic 2.0 is the new file structure and the removal of all dependencies (GSAP or jQuery)." (Link: https://ihatetomatoes.net/whats-new-scrollmagic-2-0/ )

 

Thanks Lauran

Link to comment
Share on other sites

Hi Lauran,

 

Thanks for the link.

 

The issue here is that you're loading two different versions of GSAP (without even knowing so).

 

Turns out that you're using a plugin called LayerSlider, that works on top of GSAP and an extremely old version of it may I say (1.11.8 :shock:). Then what's happening is that on top of that you're adding another version of the engine (according to what I saw in dev tools the slider plugin version loads first), which could be causing a scope issue.

 

One solution is to disable the slider plugin and see what happens. If that solves the issue I would recommend you to take a look at this post:

 

http://greensock.com/forums/topic/9881-avoid-multiple-loaded-tweenmax-and-tweenlite/

 

In it you'll find how to work if different versions of the engine are present at the same time. In this particular case the version clash is somehow big, since a lot of stuff has been added since 1.11. Although Jack is always very careful in keeping legacy compatibility for emergency cases (life is like a box of chocolates...).

 

If this solves the issue I would also encourage you to approach the plugin developers and mention this particular issue and the post link added above, so they can take the needed precautions to avoid conflicts between their plugin and other plugins that use GSAP. As I remember you're not the first person that has had this particular issue. Unfortunately is not up to anyone in this forums to correct those type of situations, all we can do is spread the word (and ask good users like you to do it as well) about recommended best practices regarding GSAP, but we can't monitor and supervise everything is done out there and correct errors.

 

Now if disabling the plugin doesn't solve your issue I honestly don't know what else could be, but I can tell you that is beyond what we can do in this forums. My believe is that this could be related to either the scope problem I mentioned before or something else related with your WordPress set up, but supporting WordPress is beyond our capabilities and we need to focus our time in solving GSAP related issues and it seems that your particular JS code is working as it should, so that is beyond our support range. Hopefully you'll understand that it has nothing to do with unwillingness to help or anything like that. We love supporting users, but we need to use our time in GSAP related stuff.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Follow up.

 

You're also using Revolution Slider from theme punch that in fact uses the suggestions from the thread linked in my previous post. That's a very solid WP plugin, so if I was you I drop the other plugin and use ThemePunch's slider.

Link to comment
Share on other sites

  • 2 months later...

I have the same issue. I'm new to GreenSock and following the "Get Started with GSAP Quickly" video, trying to see if I can get it to work in a WordPress 4.3 site I'm making locally in Ubuntu Linux. I added TweenMax code to the bottom of functions.php:

function theme_gsap_script() {
	wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); 

and main.js where the other js files get added in functions.php:

wp_enqueue_script( 'tesseract-main', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true ); 

They both show up in the page source. I typed the HTML into a visual editor, using the same code shown in the video except for the name of the svg, leaving out the body tags. The svg,  bug.svg, displays in the browser page at http://localhost/zentess/

<div class="gradient"></div>
<div class="demo">
 <img class="logo" src="http://localhost/zentess/wp-content/themes/Tesseract/images/bug.svg" alt="bug" />
</div>
<script src="wp-content/themes/Tesseract/js/main.js"></script> 

Here's the code from main.js:

TweenMax.to(".bug", 2, {left:600});

When I refresh the page nothing happens with the svg, in the Chrome v44 console it says 'Uncaught ReferenceError: TweenMax is not defined', below that it says (anonymous function) @main.js:1

On the next line the same error message is repeated, the only difference is that it says this below:

(anonymous function) @main.js?ver=1.0.0:1

Typing in windows.TweenMax returns this:

function r(t, e, s)

 

I'm using the Meta Slider plugin for a slideshow, if that matters at all.

 

Any idea what I might have missed or coded incorrectly? I'm new to all this. I love the animation I've seen on other websites and was hoping to do the same, but if it doesn't work I'll just have to skip it. I haven't found much on using GSAP with WordPress.

Thanks for any help.

Link to comment
Share on other sites

You might want to check where your main.js  file is being loaded. In the head tag or right before the ending body tag. Since in your wp_enqueue_script  you have $in_footer  set to true.

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

So more than likely your main.js  file is being loaded before TweenMax is loaded. You can either enqueue your script right after your TweenMax GSAP script, within your theme_gsap_script()  function. Or you can add a document ready() event to make sure it gets loaded after the DOM is ready.

// wait until DOM is ready before running code
jQuery(document).ready(function(){
   TweenMax.to(".bug", 2, {left:600});
});

Since WordPress already includes jQuery you can use the cross browser ready() method. You could also use a window.load  event, but since jQuery on() using load event will be better cross browser, since window.load  sometimes does not fire consistently.

 

See if that helps.. if not a screenshot of the full DOM within the console and inspector would be really helpful.

 

:)

  • Like 3
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...