GSAP, ScrollMagic & WordPress

[DeeDubs]

Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies.

 

I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far.

 

I am enqueue the scripts in my functions file like:

function my_theme_scripts_function() {
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true );
wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true );
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true);
}

add_action('wp_enqueue_scripts','my_theme_scripts_function');

then just for testing have tried using the below in my scripts file:

var controller = new ScrollMagic.Controller();
var myTest = new ScrollMagic.Scene({duration: 200})
.triggerElement('#hero1')
.setTween(testTween)
.addIndicators()
.addTo(controller);

but I keep getting the same error:

scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function

any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference.

Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible)

Cheers

D

[GreenSock]

I'm not familiar with the intricacies of the WordPress ecosystem and enqueuing, but the error you're getting looks directly related to ScrollMagic (that's what has the triggerElement() and setTween() methods). I'm wondering if maybe when you do triggerElement("#hero1"), it's not able to find that element in the DOM because it's not loaded yet, thus it returns a null value or something. Just guessing. 

[DeeDubs]

yeah I thought that but the script isn't fired until everything is loaded so the DOM element should be there. 

[Jonathan]

Try adding a DOM ready event along with a window loaded event handler to make sure your code doesn't run unless the DOM is ready and the window is fully loaded.

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

    // wait until window is loaded (images, stylesheets, JS, and links)
    window.onload = function() {
    
          // custom code goes here
    
    };

});

[DeeDubs]

Just tried that... and no joy, same error. I think I may just try calling them in via the page header rather than enqueuing them and see if that works

[Jonathan]

Hello DeeDubs,

 

Your WordPress enqueue function has true for its last parameter. That mean it loads in the footer, so its not loading in the head, but in the footer $in_footer.

 

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

wp_enqueue_script( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Have you contacted Jan Paepke who created ScrollMagic?

 

That would be the best place to find out why that ScrollMagic error is displaying. Even though ScrollMagic is made with GSAP, it is not made by GSAP.

 

File a issue about it on Jan Paepke's git:

 

https://github.com/janpaepke/ScrollMagic/issues

https://github.com/janpaepke/ScrollMagic

 

[DeeDubs]

I finally worked it out, thanks for the pointers guys... as I was starting to suspect, it was just me being a f$%$ing idiot.

 

FYI

 

as I have .addIndicators in my ScrollMagic scene I needed to make sure I was also calling the ScrollMagic Debug JS file... as that was missing it was spannering everything else!

 

Thanks again and sorry for wasting any time