install cdn link on wordrpress

[Flying Kid]

Hello all,

 

The svg i wanted to animate on my webpage, doesn't

 

1. i copied the script for linking the gsap script into my child theme functions.php file

 

<?php

/* Chargement de la feuille du style du theme parent */
add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles', 'theme_gsap_script' );
function wpchild_enqueue_styles(){
  wp_enqueue_style( 'wpm-storefront-style', get_template_directory_uri() . '/style.css' );
}

// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
    wp_enqueue_script( 'gsap-js','https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js1', get_template_directory_uri() . '/custom-js/gsap-script.js', array(), false, true );
}

?>

2. i added a folder container the javascript files (custom-js)

 

 

3. here is my gsap code (which is working on codepen gsap demo page)

 

gsap.fromTo("#root", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1});

gsap.fromTo("#branch-1", {duration:1,scale:       0,transformOrigin:"0% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});

gsap.fromTo("#branch-2", {duration:1, scale:0,transformOrigin:"100% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});

gsap.fromTo("#branch-3", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});

gsap.fromTo("#branch-4,#branch-5,#branch-6, #branch-7,#branch-8,#branch-9,#branch-10,#branch-11", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:2.5});

gsap.fromTo("#branch-12,#branch-13,#branch-14, #branch-15,#branch-16,#branch-17,#branch-18,#branch-19,#branch-20,#branch-21,#branch-22", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:3.5});

gsap.fromTo("#leaf-1,#leaf-2,#leaf-3,#leaf-4,#leaf-5,#leaf-6,#leaf-7,#leaf-8,#leaf-9,#leaf-10,#leaf-11,#leaf-12,#leaf-13,#leaf-14,#leaf-15,#leaf-16,#leaf-17,#leaf-18,#leaf-19", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:4.5});

gsap.fromTo("#leaf-20,#leaf-21,#leaf-22,#leaf-23,#leaf-24,#leaf-25,#leaf-26,#leaf-27,#leaf-28,#leaf-29,#leaf-30,#leaf-31,#leaf-32,#leaf-33,#leaf-34,#leaf-35,#leaf-36,#leaf-37,#leaf-38,#leaf-39,#leaf-40,#leaf-41,#leaf-42,#leaf-43,#leaf-44,#leaf-45,#leaf-46,#leaf-47,#leaf-48,#leaf-49,#leaf-50", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:5.5});

gsap.fromTo("#leaf-51,#leaf-52,#leaf-53,#leaf-54,#leaf-55,#leaf-56,#leaf-57,#leaf-58,#leaf-59,#leaf-60,#leaf-61,#leaf-62,#leaf-63,#leaf-64,#leaf-65,#leaf-66,#leaf-67,#leaf-68,#leaf-69", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:6.5});

Does someone see where is my mistake ? 

 

Thank you!

 

Steve

 

 

[GreenSock]

It's very difficult to troubleshoot without seeing the actual web page/site. This strikes me as more of a WordPress question (which I know almost nothing about). Are there any errors in the console? Did you make sure that your GSAP code is placed AFTER the DOM elements? If not, it can't work because the DOM elements won't exist yet when you're trying to animate them  And of course GSAP should load first too. So just make sure the order is like this: DOM > GSAP load > GSAP animation code. 

 

If you still need some help, please provide a URL.

 

Happy tweening!

[PointC]

Yeah, tough to say without a demo for sure.

 

It's not the cause of your problems, but I notice you have durations in both the from vars and to vars of those fromTo tweens. You should have that in the to vars. You also have a stagger on targets with an ID and ID's should be unique so I'm not sure what's staggering there. You could also put those tweens on a timeline and you wouldn't need all those delays. Just my two cents.

 

If you'd provide a demo or link, we can take a look for you.

[Flying Kid]

I must precise i'm a complete beginner and know very little about code. 

 

I'm confused about the DOM/GSAP load/GSAP order. I'm not sure which code goes in which file

 

1. Link to the webpage : https://ppgames.fr/accueil-new/

2. i added the DOM loading completion in the javascript file with gsap orders (is it right ?)

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  console.log("DOM loaded");

  // wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function(e) {
    
gsap.fromTo("#root", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1});

gsap.fromTo("#branch-1", {duration:1,scale:0,transformOrigin:"0% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});

gsap.fromTo("#branch-2", {duration:1, scale:0,transformOrigin:"100% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});

gsap.fromTo("#branch-3", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:1.5});

gsap.fromTo("#branch-4,#branch-5,#branch-6, #branch-7,#branch-8,#branch-9,#branch-10,#branch-11", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:2.5});

gsap.fromTo("#branch-12,#branch-13,#branch-14, #branch-15,#branch-16,#branch-17,#branch-18,#branch-19,#branch-20,#branch-21,#branch-22", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:3.5});

gsap.fromTo("#leaf-1,#leaf-2,#leaf-3,#leaf-4,#leaf-5,#leaf-6,#leaf-7,#leaf-8,#leaf-9,#leaf-10,#leaf-11,#leaf-12,#leaf-13,#leaf-14,#leaf-15,#leaf-16,#leaf-17,#leaf-18,#leaf-19", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:4.5});

gsap.fromTo("#leaf-20,#leaf-21,#leaf-22,#leaf-23,#leaf-24,#leaf-25,#leaf-26,#leaf-27,#leaf-28,#leaf-29,#leaf-30,#leaf-31,#leaf-32,#leaf-33,#leaf-34,#leaf-35,#leaf-36,#leaf-37,#leaf-38,#leaf-39,#leaf-40,#leaf-41,#leaf-42,#leaf-43,#leaf-44,#leaf-45,#leaf-46,#leaf-47,#leaf-48,#leaf-49,#leaf-50", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:5.5});

gsap.fromTo("#leaf-51,#leaf-52,#leaf-53,#leaf-54,#leaf-55,#leaf-56,#leaf-57,#leaf-58,#leaf-59,#leaf-60,#leaf-61,#leaf-62,#leaf-63,#leaf-64,#leaf-65,#leaf-66,#leaf-67,#leaf-68,#leaf-69", {duration:1, scale:0,transformOrigin:"50% 100%"},{duration:2, scale:1,stagger:0.1,delay:6.5});

     console.log("window loaded");
    
  }, false);
  
});

3. the gsap loading should occur in the functions php file ? 

4. demo of the result on codepen : 

See the Pen dyMMLxy by Flying-kid (@Flying-kid) on CodePen

 

Thanks Jack !

 

[Flying Kid]

1 hour ago, PointC said:

Yeah, tough to say without a demo for sure.

 

It's not the cause of your problems, but I notice you have durations in both the from vars and to vars of those fromTo tweens. You should have that in the to vars. You also have a stagger on targets with an ID and ID's should be unique so I'm not sure what's staggering there. You could also put those tweens on a timeline and you wouldn't need all those delays. Just my two cents.

 

If you'd provide a demo or link, we can take a look for you.

Hi Point C,

 

i'll clean my code with your remarks and try to add a timeline, thanks! (i'm a total beginner)

 

I added some info in my post above

[GreenSock]

Yeah, it looks like you're not loading GSAP at all on that page. If you "view source" and do a search for "gsap", it finds nothing. 

 

These forums are more for GSAP-specific questions, but this sounds like a WordPress question so I'm not in a great position to help, sorry. Perhaps someone else around here can chime in. 

[PointC]

Something to try would be to skip the enqueue and place the GSAP link and your custom JS link into the footer file of your theme. Just put them right before the closing <body> tag like you would a static web page. It's not the 'proper' way to do it in WordPress, but it works fine. That might give you an idea of where the problem may be.

 

Just an idea.

 

[Visual-Q]

I'm not sure that you can hook two functions in an action in that way. 

 

I believe you may have to hook the functions separately for wp_enqueue_scripts

 

add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );

add_action( 'wp_enqueue_scripts',  'theme_gsap_script' );

 

or put all your enqueus in a single function

 

https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

https://developer.wordpress.org/reference/functions/add_action/

https://developer.wordpress.org/plugins/hooks/actions/

 

 

[Flying Kid]

17 hours ago, Visual-Q said:

I'm not sure that you can hook two functions in an action in that way. 

 

I believe you may have to hook the functions separately for wp_enqueue_scripts

 

add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );

add_action( 'wp_enqueue_scripts',  'theme_gsap_script' );

 

or put all your enqueus in a single function

 

https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

https://developer.wordpress.org/reference/functions/add_action/

https://developer.wordpress.org/plugins/hooks/actions/

 

 

 

22 hours ago, GreenSock said:

Yeah, it looks like you're not loading GSAP at all on that page. If you "view source" and do a search for "gsap", it finds nothing. 

 

These forums are more for GSAP-specific questions, but this sounds like a WordPress question so I'm not in a great position to help, sorry. Perhaps someone else around here can chime in. 

 

22 hours ago, PointC said:

Something to try would be to skip the enqueue and place the GSAP link and your custom JS link into the footer file of your theme. Just put them right before the closing <body> tag like you would a static web page. It's not the 'proper' way to do it in WordPress, but it works fine. That might give you an idea of where the problem may be.

 

Just an idea.

 

 

Hello guys,

 

thanks for helping! I added the loading script of gsap directly in the html of the page concerned, and separated the 2 enqueuing functions in my php file. Works !

[Visual-Q]

Glad it's working for you, note you shouldn't have to do both. Either hardwire them directly on the page or enqueue them otherwise you may be loading them twice.

[Flying Kid]

16 hours ago, Visual-Q said:

Glad it's working for you, note you shouldn't have to do both. Either hardwire them directly on the page or enqueue them otherwise you may be loading them twice.

I removed the gsap loading from the enqueued scripts . it's strange that the custom js file with gsap instruction is executed but not the cdn link. Maybe some typo... thanks anyway ! will search for proper fix later.