Loading Tweenmax on Wordpress

[valente97]

Hi, I am trying to load version 1.3.7 of the TweenMax plugin minified version in Wordpress on my Localhost.
 
I have properly enqueued the script into the footer and its the second to last script being load (the last being my animation timeline and jQuery is the first). 
 
I get these two errors in the console

TweenMax.min.js Uncaught TypeError: Cannot read property 'greensock' of undefined(anonymous function) @ TweenMax.min.js?ver=20151215:16check @ jquery.themepunch.tools.min.js?ver=4.6.3:59c @ jquery.themepunch.tools.min.js?ver=4.6.3:59t._gsDefine @ jquery.themepunch.tools.min.js?ver=4.6.3:59(anonymous function) @ TweenMax.min.js(anonymous function) @ TweenMax.min.js
casestudy.js:5 Uncaught ReferenceError: TweenMax is not defined

 

And this is my timeline

(function($){$(function(){

	var $left = $('.preview-small.left'),
		$right = $('.preview-small.right'),
		mainTl = new TweenMax();
	
	function setStage(){
		var setTl = new TweenMax();

		setTl
			.set($left, {xPercent: 0, scale: 0.8, transformOrigin: 'center center'})
			.set($right, {xPercent: 0, scale: 0.8, transformOrigin: 'center center'})

		return setTl;
	}

	function moveInStage(){
		var moveTl = new TweenMax();

		moveTl
			.to($left, 0.9, {xPercent: -71, scale: 1, transformOrigin: 'center center', force3D:true, ease: Power4.easeInOut})
			.to($right, 0.9, {xPercent: 71, scale: 1, transformOrigin: 'center center', force3D:true, ease: Power4.easeInOut})

		return moveTl;
	}

	function init(){
		mainTl.add(setStage())
		mainTl.add(moveInStage())
	}

	init();

});}(jQuery));

Any help with this would be awesome

[Jonathan]

Hello valente97,

 

Without seeing the way your enqueuing TweenMax it will be hard to see what is going on. You want to make sure your custom gsap code gets loaded after TweenMax has loaded.

 

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

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

 

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

 

Also you might want to wrap your custom code with jQuery ready() event to make sure your code does not run unless the DOM is ready.

 

Hope this helps!