Uncaught TypeError: Cannot read property 'length' of undefined in WordPress

[J Atkinson]

Hello GSAP,

 

I've got my SVG animation working in CodePen, here's a rough start: 

 

but when I place in a WordPress site I'm getting this error in the console:

 

"Uncaught TypeError: Cannot read property 'length' of undefined".

 

I'm loading TweenMax via enqueue scripts in my functions file, so all is good there.

The SVG code is placed inline via visual composer/raw HTML.

 

Is this somehow related to doc ready? The js file begins with:  jQuery(document).ready(function ($) {

 

I'm at a loss as to how to fix this... Forgive me as I'm a GSAP newbie!

 

Any ideas? Thanks for your help!

 

 

See the Pen bVqqBm by atkinson (@atkinson) on CodePen

[Jonathan]

Hello J Atkinson, and Welcome to the GreenSock forum!

 

Regarding WordPress and GSAP, you can use the jQuery(document).ready() method .. but i would make sure you enqueue your custom JS in the footer.

 

You might want to check where your custom GSAP js file is being loaded, in the head tag or right before the ending body tag? In your wp_enqueue_script  method, the last parameter is for where you want your script loaded. You can set it to true for $in_footer... so make sure TweenMax is loaded last and then you can have your custom js code run right after that and/or in a jQuery document ready()

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

So more than likely your custom js  file is being loaded before TweenMax is loaded. You can either enqueue your script right after your TweenMax GSAP script, within the same WordPress function you enqueue for TweenMax.

<?php
// add to your functions.php
// 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.18.0/TweenMax.min.js', array(), false, true );
     wp_enqueue_script( 'gsap-js-custom', 'js/path-to-custom-js/my-custom-gsap-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

 

But i believe the main issue being the length of your pencil variable. its length is undefined probably before the page is ready, since your depending on the window object namespace of the id pencil. Which means any other element with the id pencil or the name attribute of pencil will have a conflict in the window object namespace.

 

In your example you are just using pencil as your target without declaring it as var. Even though that is allowed, it is best to cover your bases in case of any window object namespace conflicts with id and name. Either set your target for your selector in quotes, So you don't have any namespace conflicts within the window object.

 

So pencil would become "#pencil" in quotes or you can declare the variable pencil like this:

///////////////////////////////////////////////////////////
// declare your 'pencil' in a variable so you define it
// without depending on any namespace conflicts within the 
// global namespace in JS
var pencil = document.getElementById("pencil");

TweenMax.set(pencil,{
    x:800,
    y:-100,
    scale:1.2,
    skewY:5,
    rotation:200,
    transformOrigin:'center center'
});

// OR

///////////////////////////////////////////////////////////
// GSAP uses document.querySelectorAll() for the target 
// so you can just declare the tween target like this
TweenMax.set("#pencil",{
    x:800,
    y:-100,
    scale:1.2,
    skewY:5,
    rotation:200,
    transformOrigin:'center center'
});

So just recap.. try enqueue both TweenMax and your custom js file together so they get loaded in the footer together one after another. And to declare your pencil variable in the beginning of your custom js, or just declare your ID in a string like "#pencil" in your tween target.

 

Let us know if you have any other questions, and see if that helps?

 

[J Atkinson]

Hi Jonathan,

 

Thanks so much for the quick response.

 

So TweenMax and my scripts are definitely in the footer, in the right order. 

This is how they look in my functions file:

wp_register_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js', array(), false, true );
wp_enqueue_script( 'gsap-js' );
     wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-script-b.js', array(), false, true );
wp_enqueue_script( 'custom-script' );

And the var was in my file, for some reason I didn't paste it in the pen. (I tried both methods with same results)

 

Here's what's happening:

 

The animation runs normally but as soon as it stops the "Uncaught TypeError: Cannot read property 'length' of undefined" error appears in the console with a running counter. If I use repeat:-1 no error appears.

 

This particular site is still in the local dev stage, but I can make a live dev site to test if needed.

 

Thanks so much for your help! I'll be golden if I could just get GSAP working with WordPress!

 

Janet

[Jonathan]

GSAP can definitely work with WordPress   I'm sure a live dev site would be nice, so we can see your code live and in context.

 

Have you tried declaring your pencil target as a variable?  .. This way we can rule that out and see if you still get the console error, even after declaring pencil as a variable instead of a namespace within the window object. WordPress can be real picky with global variables, since some JavaScript libraries used in the WordPress admin are also used on the front-end via its enqueue_script method.

 

Thanks

[J Atkinson]

I've found the answer!

 

As it turns out a plugin (LayerSlider WP) I believe also uses Greensock, so WordPress was loading it twice.

 

I deactivated LayerSlider and no more errors!!!

 

Hopefully this will help anyone else using GSAP with WordPress.

 

By the way, thanks for the great support.

[Jonathan]

Glad you figured it out, Happy Tweening!

[Paul Hunault]

Hi there,

 

I have the same error "Cannot read property 'length' of undefined"

You can see my website here :  http://devpm.pureemaison.com/

 

Here is my code : 

function pm_onScrollInit( items, trigger ) {
			items.each( function() {
				var Element = $(this),
				    AnimationClass = Element.hasClass('text_anim'),
				    split_text = new SplitText(Element, {type:"lines,words"}),
				    tl = new TimelineLite();

				var Trigger = ( trigger ) ? trigger : Element;

				Trigger.waypoint(function() {
					tl.staggerFrom(split_text.lines, 1, {y:-20, autoAlpha:1, ease:Back.easeOut}, 0.02);
				},{
				    triggerOnce: false,
				    offset: '75%'
				});
			});
		}
		pm_onScrollInit( $('.text_anim') );

 

Any ideas ?

 

Thanks for your help !

[Carl]

Hi Paul,

 

Welcome to the GreenSock forums.

 

There are too many things that be causing this that we can't properly diagnose from the code snippet provided.

Please fork the CodePen demo below (it loads SplitText and TweenMax) and try to replicate your error with as little html, css, js as possible.

I would suggest removing all the code related to whatever scroll library you are using so that we can verify that things work without that. Once we can verify the basic animation, you can start adding in more complexity.

 

See the Pen ZJpGra by GreenSock (@GreenSock) on CodePen

 

- run pen

- edit on codepen

- fork

- add your code

- save

- send us a link to your pen that clearly shows the error

 

More info on using CodePen: 

 

 

Thanks!

 

 

[Paul Hunault]

Hello,

 

Thanks for you quick answer.

I found the solution by using jQuery(document).ready() method

 

Thank you