Bubba Posted February 8, 2022 Share Posted February 8, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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"; 1 Link to comment Share on other sites More sharing options...
Bubba Posted February 8, 2022 Author Share Posted February 8, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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() 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2022 Share Posted February 8, 2022 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? 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 8, 2022 Solution Share Posted February 8, 2022 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); }, []) 1 Link to comment Share on other sites More sharing options...
Bubba Posted February 8, 2022 Author Share Posted February 8, 2022 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! 2 Link to comment Share on other sites More sharing options...
mantiss Posted May 3 Share Posted May 3 Bubba can you show your code because i also did same but mine still not working Link to comment Share on other sites More sharing options...
Rodrigo Posted May 3 Share Posted May 3 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! Link to comment Share on other sites More sharing options...
mantiss Posted May 9 Share Posted May 9 @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 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 9 Share Posted May 9 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now