enqueue gsap in Function.php for wordpress

[uavide]

Good morning, i add this code in the code elements of a wordpress builder and  it works:
So i get the gsap library from cdn link and i add a simple gsap animation to an image with a specific class.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
gsap.to(".lago2", {duration: 2, x: 200, ease: "bounce"});
  </script>

<style>
.lago2 {
  width:180px;
}
</style>

<img class="lago2" src="/wp-content/uploads/2022/07/logo.jpg" alt="" width="180" height="180" />

i discovered that it’s better to add the js libraries (gsap) with enqueue in function.php of wordpress
So i tried to add to the function.php this code:

function wpb_adding_scripts(){
	
	wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js', array(), '1.0', true );

	wp_enqueue_script('gsap'); 
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

and i remove from the code elements in the builder the script src about the cdn link.
So my code in the code element in the builder (in wordpress) it’s like this:

<script>
gsap.to(".lago2", {duration: 2, x: 200, ease: "bounce"});
  </script>

<style>
.lago2 {
  width:180px;
}
</style>

<img class="lago2" src="/wp-content/uploads/2022/07/logo.jpg" alt="" width="180" height="180" />

But it doesn't work...so i thought that maybe my enqueue code in function.php it's wrong. What do you think? could you help me to understand?

Many thanks

Davide

[SteveS]

This is more of a wordpress questions than a gsap question. There should be a copy paste solution online for this particular issue. As someone who worked with WordPress for a few years and currently does GSAP work on WordPress sites, I think it's easier to just use a script management plugin.

[uavide]

yes i know, thanks...but finally i found the solutions and i think could be helpful for all the people in the forum that use wordpress and they want to integrate GSAP by enqueue in function.php

function theme_gsap_script() {
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/.../gsap/3.10.4/gsap.min.js', array(), false, true );
wp_enqueue_script( 'gsap-script', get_stylesheet_directory_uri() . '/js/gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

 

[LondonPete]

Uavid, can you tell me if you actually put anything in the /js/gsap-scripts.js file? I'm not sure what the second enqueue is for.

Many thanks

[Cassie]

Hi - this thread is a year old so you may not get a response, if you're struggling we have a guide here

 

https://gsap.com/resources/Wordpress/

 

From a glance he's enqueuing the GSAP library and a JS file with his own code in

[LondonPete]

Thanks so much, it's all working now.