[Support request] GSAP library

[K-Lab]

Hi, I can’t import the gsap library. Creating two new hooks one for the library script one for the gsap code hooked to the class, I get an error in the console.
How can I solve?

[David]

Hi there,

can i see the site with the errors ?

[K-Lab]

Yes , here

created a hook with the library inside: <script> https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js </script> and a second hook with the code to execute inside:
<script> gsap.to (“. site-logo”, {top: 30, opacity: 1, duration: 1, x: -100}); </script>

[David]

Ok so 2 things:

1. to enqueue a JS file you use this:

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js' id='gsap-script'></script>

The id is optional.

2. Make sure the ABOVE code is added before the script.

[K-Lab]

it doesn’t give me an error but it doesn’t work anyway. In one hook only I entered:
<script src = ‘https: //cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js’ id = ‘gsap-script’>

gsap.to (“. site-logo”, {top: 30, opacity: 1, duration: 1, x: -100, width: 200px! important});

</script>

[David]

This is the first code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js' id='gsap-script'></script>

After that you add your:

<script>
// Your gsap code here
</script>

[K-Lab]

ok i did it by putting wp-head, wp-footer instead.

Do I always have to use wp-footer for this to work?

[David]

for this kind of script: yes, as you’re using Javascript to ‘manipulate’ a HTML element ( the site-logo ). By using the wp_footer you ensure the script gets fired AFTER the HTML is loaded. Whereas in the head the HTML would not have been loaded and the script would not have found the site-logo

[K-Lab]

Thank you very much!

[David]

You’re welcome

[Author]

Posts