Need help with a strange bug on ScrollerProxy in React

[nazanin]

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

[OSUblake]

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);
      }
    };

 

 

[GreenSock]

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)

 

 

[OSUblake]

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";

 

 

 

 

[nazanin]

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.