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!

[mantiss]

Bubba can you show your code because i also did same but mine still not working

[Rodrigo]

Hi @mantiss,

 

You can try checking for the window object so it works only on the browser and not during deploys or SSR (in case you have SSR in your project):

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

Although the useEffect/useLayoutEffect approach should work as well.

 

Happy Tweening!

[mantiss]

@Rodrigo first of all thanks for acknowledge my reply and the solution did not work by the way my problem in same and when i run my build folder the scroll automatically to the end without my scroll

 

i use pin the image scroll system in which it scroll horizontall to the end at the start point not with the scroll bar see if you have any solution 

 

Happy tweening

[Rodrigo]

Hi,

 

I believe the issue starts with the first error you have in the console there, then it kinds of dominoes in the wrong way with ScrollTrigger somehow.

 

Without a minimal demo that clearly illustrates the issue, there is not a lot we can do I'm afraid. I haven't seen any issue like that when deploying to Netlify react/next and vue/nuxt apps before, so I couldn't tell you what the issue is 🤷‍♂️

 

Sorry I can't be of more assistance 😞

Happy Tweening!