nazanin Posted March 22, 2022 Share Posted March 22, 2022 Hi to the great team of greenSock, I'm naz from Ukraine, and I'm developing a website as my portfolio for about a year now and i had very hard time trying to solve all the bugs i found currently i have a very strange problem with scrollerProxy which i couldn't fix it for many months, in the past year i spent every day on gsap forum reading solutions to my different problems and gladly fixed them all with your help but this one is strange i couldn't find a solution for it in the whole internet and I'm actually run out of time ( I don't know if you know about the situation in Ukraine but right now i need to complete my portfolio as soon as possible to star to work ) so i would appreciate it very much if you can help me. about the problem: i have developed a website using react and locomotive scroll and used gsap for all the animations, my problem is when i run my website for the first time everything works perfectly but if i change the route or update locomotive instance (which sometimes i have to because the lenght of the page changes) scrollerProxy stops working! and all my animations will stop working too🙃😭 i have prepared a minimal demo of a part that can show the problem but i used codesandbox instead of codepen because idk how to use codepen for react projects, i embed it in a codepen pen, I hope that's not a problem. (sorry for that) i added all the scrollerProxy related code in useLoco.js when you open the link for the first time and scroll down the header fades as it should be, but when you click a button and scroll down the animations are gone. i would really appreciate if you can take a look and help me to fix it thank you very much and btw you guys are great! See the Pen JjMbPRz by nazanin3s (@nazanin3s) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted March 23, 2022 Share Posted March 23, 2022 Hi nazanin, 8 hours ago, nazanin said: i have prepared a minimal demo of a part that can show the problem but i used codesandbox instead of codepen because idk how to use codepen for react projects, i embed it in a codepen pen, I hope that's not a problem. A link to codesandbox is all you needed to do. We just want a minimal demo, whether it be on Codepen, Codesandbox, JSFiddle, or some other online code editor. To reset the scrollerProxy, you can pass in null. return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", lsUpdate); ScrollTrigger.scrollerProxy(null); // <- this will get rid of the current scrollerProxy locoScroll.destroy(); locoScroll = null; console.log("Kill", locoScroll); clearTimeout(timer); } }; Link to comment Share on other sites More sharing options...
GreenSock Posted March 23, 2022 Share Posted March 23, 2022 You actually need to pass in null for the proxy stuff, not the target: // BAD ScrollTrigger.scrollerProxy(null); // GOOD ScrollTrigger.scrollerProxy(yourScroller, null); // <-- now yourScroller won't have a proxy (removes it) 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted March 23, 2022 Solution Share Posted March 23, 2022 And you may need to create your ScrollTriggers again. Also, you were importing the wrong ScrollTrigger. scrollTrigger is not GSAP's ScrollTrigger. // import ScrollTrigger from "scrolltrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger"; 1 Link to comment Share on other sites More sharing options...
nazanin Posted March 23, 2022 Author Share Posted March 23, 2022 4 hours ago, OSUblake said: And you may need to create your ScrollTriggers again. Also, you were importing the wrong ScrollTrigger. scrollTrigger is not GSAP's ScrollTrigger. // import ScrollTrigger from "scrolltrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger"; omg 😭 Thank you very much, Thank you Thank you it works, finally after a year my website works😭😭 yeah after i correct the cleanup function the way you showed, i had to recreate (actually rerun the useEffects with animations in it) ScrollTriggers and now it works perfectly I'm soooo happy thank you very much. 1 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