ScrollTrigger not working with Netlify

[Bubba]

I believe I have everything where it needs to be but when I start my app on Netlify it just immediately fires off all scrolltriggers and they dont wait for their start point. They wait and do what they are suppose to on my local machine but not on production with Netlify. I also am a memeber and have registered private plugins, if someone could help that would be fantastic. 

 

 

[OSUblake]

It's very hard to tell what's going on from a code snippet, and we really can't troubleshoot a live site. The only thing that stands out to me is that you are animating your trigger, .deliverText, which will mess up ScrollTrigger's calculations, and you should probably have an array at the end of your useEffect.

 

useEffect(() => {
  ...
}, [])

 

Also, if you're doing SSR, like with next.js, you should import from the dist folder.

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

 

[Bubba]

Thank you for responding so quickly. So I added, the array at the end of use effect already and that did not work, also the dist on the imprt did not seem to change anything. Do you think that me animating the trigger would stop it from working in production? It works fine in local, it just all starts at once in production. if so, what would be your suggestion on the refactor?

 

Also this is the error in production 

[OSUblake]

It's really hard to troubleshoot a live site. The only thing I can really suggest is to put markers on your triggers, and start commenting out the animations to isolate the problem.

 

I wouldn't expect animating the trigger to make it completely stop working, but it can definitely mess up stuff up.

 

Also, is the height deliverText dynamic, like maybe with an image? If the layout changes somehow, you should call ScrollTrigger.refresh()

 

[GreenSock]

That "Invalid property scrollTrigger...." error is definitely because GSAP doesn't have ScrollTrigger registered at that point. In other words, it thinks you're literally trying to animate a property named "scrollTrigger" on your target (and obviously that doesn't exist). Can you reproduce the problem in a minimal demo in CodeSandbox or something? 

 

And you're positive that you ran gsap.registerPlugin(ScrollTrigger) BEFORE any of your animations were created? 

[OSUblake]

Ah, you posted those errors after my post. I would try registering ScrollTrigger inside your useEffect.

 

useEffect(() => {
  gsap.registerPlugin(ScrollTrigger);
  
  // and for good measure to verify the file is loading correctly
  console.log("ScrollTrigger", ScrollTrigger);
}, [])

 

[Bubba]

I had it registered in the useEffect and outside of it. I commented out the one outside and it now seems to work on deploy on Netlify. Thank you so much for your help!