ScrollTrigger, REACT react-router-dom

[steen hjalmar larsen]

Having problems with killing scrollTrigger on mobile when i shifting between different pages. It works fine on desktop. 

Have set up a pen where it actually works, but when I do the same on my online site it doesn't work

Link: pen

Link: my site

Has anyone had similar problems and possibly found a solution

[Rodrigo]

Hi,

 

I see that you are using React 18, it might be a good idea to use GSAP Context to create your GSAP and ScrollTrigger instances and use it in your cleanup process:

https://greensock.com/docs/v3/GSAP/Context

 

Here is a live example using this approach with the latest versions of GSAP, ScrollTrigger, React and React DOM:

https://codesandbox.io/s/gsap-react-routing-x666fx

 

This is the direct link so you can test in your device:

https://x666fx.csb.app/

 

Unfortunately we can't debug live sites since we don't have access to the part of the codebase that could be causing the issue. Hopefully that example and GSAP Context are helpful.

 

Happy Tweening!

[steen hjalmar larsen]

Thank you for replying so quickly, i will definitely take a look at it, it looks very interesting

[steen hjalmar larsen]

Thanks again for your nice reply

Unfortunately, your fine suggestions did not solve my problem.

After some exploration, I can see that a resize event handler is created from the scrollTrigger, which continues to be found on subsequent pages.
On my front page I get from inspect
getEventListeners(window).resize.forEach((elm)=>{console.log(elm)})
VM12085:1 {useCapture: false, passive: false, once: false, type: 'resize', listener: ƒ}
VM12085:1 {useCapture: false, passive: true, once: false, type: 'resize', listener: ƒ}
It seems that it is the event handler with "passive: true" that is causing trouble.
 

I can remove it in the inspect window on the other pages and that solves the problem
getEventListeners(window).resize.forEach((elm)=>{if(elm.passive === true){removeEventListener('resize', elm.listener)}})
but unfortunately I can't get this code to work in React

 

In React I can't use "getEventListeners(window)" react claims that getEventListeners is not a function?

[Rodrigo]

Hi,

 

Can you take a look at this example and follow that particular pattern to structure your app?:

https://codesandbox.io/s/gsap-react-routing-x666fx?file=/src/App.js

 

If you test the live site without any frames or any added stuff you can see that there are no errors/warnings being thrown because of resize events even after you navigate away from a route that has a ScrollTrigger instance:

https://x666fx.csb.app/

 

If the ScrollTrigger resize callback is being triggered after you navigated away from that specific route, means that you are not cleaning up your component correctly, meaning that you are not removing all the ScrollTrigger instances in your component. If you have nested components that have their own ScrollTrigger instances, you have to cleanup those as well.

 

Happy Tweening!