[Support request] GSAP library

Home Forums Support [Support request] GSAP library

Home Forums Support GSAP library

  • This topic has 9 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2230499
    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?

    #2230516
    David
    Staff
    Customer Support

    Hi there,

    can i see the site with the errors ?

    #2230529
    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>

    #2230584
    David
    Staff
    Customer Support

    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.

    #2230599
    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>

    #2230610
    David
    Staff
    Customer Support

    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>
    #2230638
    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?

    #2230685
    David
    Staff
    Customer Support

    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

    #2230744
    K-Lab

    Thank you very much!

    #2230770
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.