GSAP - Register Plugin error (when trying to use Start and Markers)

[shaneharley]

Have a bit of an odd problem. From what I can tell my GSAP is working, but when I try to add a start position, and turn on markers, I get a lot of these errors thrown.  Weird thing is, the GSAP animations I have setup still work?

'Invalid property markers set to true Missing plugin? gsap.registerPlugin()'

 

I'm using nextJS and importing my GSAP like follows (I also feel like I've tried every version of imports)

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

[shaneharley]

Worth noting it also does it if I just use the CDN

[shaneharley]

Okay, few other things I've noticed. 

Works here

  //this cycles through each section and creates the triggers
  pageSections.forEach(section => {
    ScrollTrigger.create({
      trigger: section,
      start: 'top top+=100',
      markers: true,
      onEnter: self => checkColorTheme(section),
      onEnterBack: self => checkColorTheme(section)
    });
  })
}

but not here

  ref.current.forEach(el => {
    gsap.from(el, {
      scrollTrigger: el,
      autoAlpha: 0,
      start: 'top top+=100',
      markers: true,
      delay: 0.5
    });
  });

 

[shaneharley]

Think we can ignore this. Looks like I was setting up my gsap.from incorrectly

This works

ref.current.forEach(el => {
    gsap.from(el, {
      scrollTrigger: {
        trigger: el,
        start: "top center",
      },
      autoAlpha: 0,
      delay: 0
    })
  });

 

[ZachSaucier]

Good work finding the issue. ScrollTrigger properties should be in the ScrollTrigger vars object