Site logo

Archived topic

GSAP library

9 replies · Started by K-Lab on May 24, 2022

Viewing posts 1–10 of 10

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?

Hi there,

can i see the site with the errors ?

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.

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>

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>

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

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

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

Thank you very much!

You're welcome

This archived topic is closed to new replies.