Have things changed?

[TrulyNewbie]

Hi, I've built all my wordpress websites using GSAP using the exact same 'layout' of code.

But recently when I began to use  3.11.3 as opposed to 3.10.3 I keep getting messages saying "$ is not a function". 

 

I've set up my codepen exactly how my site is.

Is this a wordpress thing or GSAP thing or a me thing?

 

 

Thank you for your help

See the Pen GRYRMmd by NewbieRuby (@NewbieRuby) on CodePen

[TrulyNewbie]

My functions.php

// The proper way to enqueue GSAP script in WordPress

 

// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

function theme_gsap_script(){

// The core GSAP library

 

 

wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true );

wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true );

wp_enqueue_script( 'gsap-scrl2', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollToPlugin.min.js', array('gsap-js'), false, true );

// Your animation code file - with gsap.js passed as a dependency

wp_enqueue_script( 'gsap-ss', get_template_directory_uri() . '/js/ScrollSmoother.min.js', array('gsap-js'), false, true );

wp_enqueue_script( 'gsap-mrph', get_template_directory_uri() . '/js/MorphSVGPlugin.min.js' , array('gsap-js'), false, true );

wp_enqueue_script( 'gsap-splt', get_template_directory_uri() . '/js/SplitText.min.js', array('gsap-js'), false, true );

wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('gsap-js'), false, true );

}

add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

 

add_action( 'wp_enqueue_scripts', 'themeprefix_slick_enqueue_scripts_styles' );

function themeprefix_slick_enqueue_scripts_styles() {

 

wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0', true );

wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');

}

[Rodrigo]

Hi,

 

24 minutes ago, TrulyNewbie said:

"$ is not a function".

That particular error stems from the fact that when that part of the code runs, jQuery is not loaded yet. This is more related to the fact that your custom script file should have GSAP and jQuery as a dependencies on the script loading queue. As far as I know there is no method in the GSAP API that uses the $ sign, that would be extremely confusing for developers using jQuery.

 

Hopefully this helps.

Happy Tweening!

[TrulyNewbie]

I see! Thank you Rodrigo! My mistake!

For anyone else who may have this issue. I made GSAP a dependency on my custom js file, but I also needed to make JQUERY a dependancy too. 

 

from:

wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('gsap-js'), false, true );

to: 

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js', array(), null, true);

wp_enqueue_script( 'gsap-app', get_template_directory_uri() . '/js/ruby-app.js', array('jquery', 'gsap-js'), false, true );