GSAP & WordPress

[Tony Geek]

Hi,

I've tried following the guide found here in order to integrate GSAP into my WordPress website.
So far, it's gone well. Except for the fact that I cannot trigger any easing, nor can I enable the ScrollTrigger plugin.

 

Here's a sample of my functions.php code:
 

function enqueue_global_functions() {
	wp_enqueue_script( 'global-functions', get_stylesheet_directory() . 'js/global-functions.js', array( 'jquery' ), '1.0.0', true );
}
// Include GSAP javascript
function enqueue_gsap() {
	wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js', array( ), false, true );
	wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js', array( 'gsap-js' ), false, true );
}

add_action( 'wp_enqueue_scripts',  "enqueue_gsap", 99);
add_action( 'wp_enqueue_scripts',  "enqueue_global_functions", 100);

and then as well, my JavaScript:

window.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed")
  /* ========== Global Functions JS ========== */
  window.addEventListener("load", function(e){
    gsap.registerPlugin(ScrollTrigger);
    // Check if we're on the home page
    if (window.location.pathname === '/') {
      homeAnimation();
    }
  });
  /* ========== Global Functions JS END ========== */
});

function homeAnimation() {
  console.log(gsap)
  let tl = gsap.timeline({
    defaults: {
      immediateRender: false
    },
    scrollTrigger: {
      trigger: "#team-members",
      start: "top top",
      end: "bottom bottom",
      pin: true,
      scrub: 1,
      markers: true,
    },
    lazy: false
  })
  tl.from("#team-members", {trigger: "#team-members", y: 100, ease: "power1.inOut", duration: 1})
  tl.to("#team-members", {trigger: "#team-members", y: 0, ease: "power1.inOut", duration: 1})
}

However when I load the page in question, the only thing I get is the animation jumping from one space to another. I've tried multiple different ways around setting up the ScrollTrigger, but nothing seems to work. I know GSAP is working because the object is being moved. However none of the transition styles are applying, and neither is the ScrollTrigger. At one point it wasn't throwing errors, but now it's telling me that I haven't registered ScrollTriggers when I clearly have. The error message I get is: Invalid property trigger set to #team-members Missing plugin? gsap.registerPlugin() . Is there something that I'm doing wrong? I can't clearly find an answer as to how I'm doing things wrong. I'm even changing the order that scripts are being enqueued so as to load gsap and scrolltrigger before loading my custom scripts. And I can tell this from the order that they're loading in the footer, as is shown in the image attached.
 

[Rodrigo]

Hi @Tony Geek and welcome to the GreenSock forums!

 

Most likely this has to do with the way you're queuing your scripts. Your global functions file should have ScrollTrigger as a dependency in the array:

// Include GSAP javascript
function enqueue_gsap() {
  wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js', array( ), false, true );
  wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js', array( 'gsap-js' ), false, true );
}

function enqueue_global_functions() {
  wp_enqueue_script( 'global-functions', get_stylesheet_directory() . 'js/global-functions.js', array( 'jquery, gsap-st' ), '1.0.0', true );
}

That should be enough to have that file added after GSAP and ScrollTrigger.

 

Hopefully this helps.

Happy Tweening!

[Tony Geek]

Hi,

Thanks a lot for this! Seems to be implementing the ScrollTrigger now which is good.