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