TrulyNewbie Posted April 6, 2023 Share Posted April 6, 2023 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 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted April 6, 2023 Author Share Posted April 6, 2023 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'); } Link to comment Share on other sites More sharing options...
Rodrigo Posted April 6, 2023 Share Posted April 6, 2023 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! Link to comment Share on other sites More sharing options...
TrulyNewbie Posted April 12, 2023 Author Share Posted April 12, 2023 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 ); 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now