GSAP Club Plugins on Wordpress

[NettlofScunthorpe]

 

Hey there, 

 

We recently have purchased the Greensock Club membership for our business. 

 

We mainly develop websites on the Wordpress platform for our clients. 

 

I have installed GSAP, SmoothScoll and SplitText to try impliment them onto our site.

 

I have added the minified files to:

 

htdocs/wp-content/themes/child-theme/js

 

And in my functions.php this line:

function enqueue_gsap_scripts() {
    // Enqueue GSAP
    wp_enqueue_script('gsap', get_stylesheet_directory_uri() . '/js/gsap.min.js', array(), null, true);
    
    // Enqueue SplitText plugin with dependency on GSAP
    wp_enqueue_script('splittext', get_stylesheet_directory_uri() . '/js/SplitText.min.js', array('gsap'), null, true);
    
    // Enqueue ScrollSmoother plugin with dependency on GSAP
    wp_enqueue_script('scrollsmoother', get_stylesheet_directory_uri() . '/js/ScrollSmoother.min.js', array('gsap'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_gsap_scripts');

 

When I load the site, I get these errors and warnings on the console:

 

Uncaught ReferenceError: SplitText is not defined
    at (index):264:25
gsap.min.js:10 Invalid property scrollTrigger set to Object Missing plugin? gsap.registerPlugin()
Q @ gsap.min.js:10
gsap.min.js:10 Invalid property scrollTrigger set to Object Missing plugin? gsap.registerPlugin()

 

Any suggestions on how I can get this working? I've tried looking through the docs on the install, but can't see anything relevant to this. 

[Rodrigo]

Hi @NettlofScunthorpe and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

I can think of two reasons:

1. Your custom JS file is being loaded before the plugins, maybe you're adding it to WP queue with only the GSAP core as a dependency. Add your custom JS file with all the plugins as dependencies (since the plugins depend on the core file that will be loaded by then):

   // Enqueue SplitText plugin with dependency on GSAP
   wp_enqueue_script('splittext', get_stylesheet_directory_uri() . '/js/SplitText.min.js', array('gsap'), null, true);
   
   // Enqueue ScrollSmoother plugin with dependency on GSAP
   wp_enqueue_script('scrollsmoother', get_stylesheet_directory_uri() . '/js/ScrollSmoother.min.js', array('gsap'), null, true);
   
   // Custom JS
   wp_enqueue_script('myscript', get_stylesheet_directory_uri() . '/js/myScript.js', array('splittext, scrollsmoother'), null, true);

2. You are not registering the plugins in your custom JS:

   gsap.registerPlugin(SplitText, ScrollTrigger, ScrollSmoother);

Finally is worth noticing that ScrollSmoother works on top of ScrollTrigger, so you have to include that in your enqueue_gsap_scripts function as well.

 

Hopefully this helps.

Happy Tweening!

[NettlofScunthorpe]

Hey Rodrigo,

 

Thanks for your reply, 

 

I've tried following along, but still getting the errors. 

 

What may be causing it, my custom JS I've been adding onto the specific page in a 'Custom Code' block. Would adding it in this way be calling it in the wrong order? Is the best practice to do all my custom JS when using GSAP, to do it in an external js file which is enqueued?

 

I've created a fresh site on our staging server to test this.

 

Firstly, I connected to the server via SFTP: (image 1)

 

I then have edited the functions.php to this:

 

<?php

function enqueue_custom_scripts() {
    // Enqueue GSAP
    wp_enqueue_script('gsap', get_template_directory_uri() . '/scripts/gsap.min.js', array(), true);

    // Enqueue SmoothScroller
    wp_enqueue_script('smoothscroller', get_template_directory_uri() . '/scripts/smoothscroller.min.js', array('gsap'), true);

    // Enqueue SplitText
    wp_enqueue_script('splittext', get_template_directory_uri() . '/scripts/SplitText.min.js', array('gsap'), true);

    // Enqueue ScrollTrigger
    wp_enqueue_script('scrolltrigger', get_template_directory_uri() . '/scripts/ScrollTrigger.min.js', array('gsap'), true);
}

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');


/**
 * Setup Child Theme Styles
 */
function pro_design_enqueue_styles() {
	wp_enqueue_style( 'pro_design-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0' );
}
 add_action( 'wp_enqueue_scripts', 'pro_design_enqueue_styles', 20 );


/**
 * Setup Child Theme Palettes
 *
 * @param string $palettes registered palette json.
 * @return string
 */
function pro_design_change_palette_defaults( $palettes ) {
	$palettes = '{"palette":[{"color":"#2B6CB0","slug":"palette1","name":"Palette Color 1"},{"color":"#215387","slug":"palette2","name":"Palette Color 2"},{"color":"#1A202C","slug":"palette3","name":"Palette Color 3"},{"color":"#2D3748","slug":"palette4","name":"Palette Color 4"},{"color":"#4A5568","slug":"palette5","name":"Palette Color 5"},{"color":"#718096","slug":"palette6","name":"Palette Color 6"},{"color":"#EDF2F7","slug":"palette7","name":"Palette Color 7"},{"color":"#F7FAFC","slug":"palette8","name":"Palette Color 8"},{"color":"#ffffff","slug":"palette9","name":"Palette Color 9"}],"second-palette":[{"color":"#2B6CB0","slug":"palette1","name":"Palette Color 1"},{"color":"#215387","slug":"palette2","name":"Palette Color 2"},{"color":"#1A202C","slug":"palette3","name":"Palette Color 3"},{"color":"#2D3748","slug":"palette4","name":"Palette Color 4"},{"color":"#4A5568","slug":"palette5","name":"Palette Color 5"},{"color":"#718096","slug":"palette6","name":"Palette Color 6"},{"color":"#EDF2F7","slug":"palette7","name":"Palette Color 7"},{"color":"#F7FAFC","slug":"palette8","name":"Palette Color 8"},{"color":"#ffffff","slug":"palette9","name":"Palette Color 9"}],"third-palette":[{"color":"#2B6CB0","slug":"palette1","name":"Palette Color 1"},{"color":"#215387","slug":"palette2","name":"Palette Color 2"},{"color":"#1A202C","slug":"palette3","name":"Palette Color 3"},{"color":"#2D3748","slug":"palette4","name":"Palette Color 4"},{"color":"#4A5568","slug":"palette5","name":"Palette Color 5"},{"color":"#718096","slug":"palette6","name":"Palette Color 6"},{"color":"#EDF2F7","slug":"palette7","name":"Palette Color 7"},{"color":"#F7FAFC","slug":"palette8","name":"Palette Color 8"},{"color":"#ffffff","slug":"palette9","name":"Palette Color 9"}],"active":"palette"}';
	return $palettes;
}
add_filter( 'kadence_global_palette_defaults', 'pro_design_change_palette_defaults', 20 );

/**
 * Setup Child Theme Defaults
 *
 * @param array $defaults registered option defaults with kadence theme.
 * @return array
 */
function pro_design_change_option_defaults( $defaults ) {
	$new_defaults = '[]';
	$new_defaults = json_decode( $new_defaults, true );
	return wp_parse_args( $new_defaults, $defaults );
}
add_filter( 'kadence_theme_options_defaults', 'pro_design_change_option_defaults', 20 );

 

Now, when I open up the developer console, I'm getting these errors:

 

 

I'm really struggling to get my head around how to get this working on a Wordpress site, any help would be appreciated.

 

Link to test site: https://frn01813.uk.w3pcloud.com/

 

 

[Cassie]

Heya!

Taking a look at the 404 error's - you're directing to two GSAP files. One doesn't exist because it's a typo, correct folder though.
https://frn01813.uk.w3pcloud.com/wp-content/themes/pro-design/scripts/gsam.min.js   

 

the rest are in the wrong theme folder

https://frn01813.uk.w3pcloud.com/wp-content/themes/kadence/scripts/gsap.min.js - wrong theme folder

https://frn01813.uk.w3pcloud.com/wp-content/themes/kadence/scripts/ScrollTrigger.min.js

And this one is a typo and in the wrong theme folder - You're trying to include a file called smoothscroller.min.js, it's ScrollSmoother.min.js
https://frn01813.uk.w3pcloud.com/wp-content/themes/kadence/scripts/smoothscroller.min.js?ver=1

From your screenshot of your file system you can see that the scripts are here, so do whatever you were doing with the GSAM file, but spell it properly this time ☺️
https://frn01813.uk.w3pcloud.com/wp-content/themes/pro-design/scripts/gsap.min.js

It looks like you're doing all the hard stuff right but just not getting the file paths and spelling correct! Take it slowly.

[NettlofScunthorpe]

Hey Cassie,

 

Thanks for taking time to reply,

 

 I can see the spelling mistakes now they are pointed out, but I'm not sure what's causing them? Same with some of the files being in the wrong theme folder. 

 

On my SFTP, all the minified files are under the child theme (pro-design) which is a child of the Kadance theme. 

 

And when I'm enqueing them in my Functions.php, they are being placed under 

 

Pro-design

- scripts

 

Where none of the files have been placed in the adult theme like the site is pulling from?

 

Does this mean it's an issue on our hosts end?

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to troubleshoot the source of spelling errors in files on your server or incorrect paths/links. Is there anything GSAP-specific we could help with? For host/server-related questions, I'd suggest you reach out to your hosting company. 

[Rodrigo]

Hi,

 

Have you tried somewhere in a page or something like var_dump or echo in order to see what that particular function is returning?:

get_template_directory_uri()

The files are in the server, but clearly the url being passed is wrong, so you need to check properly what is being returned in order to know exactly what's being returned from it. Unfortunately this is not GSAP related and given the constraints imposed by wordpress there is not a lot we can do.

 

Happy Tweening!

[joerij]

@NettlofScunthorpe How did you fix it, I am also using Kadence. But I can't figure it out how to implement it. Any tips? 

[mvaneijgen]

Hi @joerij welcome to the forum! 

 

As some of the replies above have suggested sure to log your code so that you can see what is going on and that things are what you expect them to be.

 

Also keep in mind that get_template_directory_uri() gets you the route of the current parent theme and get_stylesheet_directory_uri() get you the route to the current child theme, if it is called within your child theme logic! https://developer.wordpress.org/themes/advanced-topics/child-themes/

 

Hope it helps and happy tweening!