ScrollTrigger and SPA updates?

[clieee]

Hi,

 

As I'm trying out to add some ScrollTriggers to a website, built with React, I have some issues when navigating between routes.

On first load, it seems like ScrollTrigger catches all dimensions etc in order to calculate correct trigger points. But as I navigate to other routes/pages it wont get correct trigger points. I guess this is due some observation of for example images being loaded for example. As soon as I trigger a resize, the trigger points are again correct. 

 

What would be a good way to approach this? I've tried with ScrollTrigger.refresh but seems like it is not being fired at the right moment.. 

Sorry to not being able to provide a url or codepen at the moment, but hopefully you can get some understanding of my challenge.

 

Thanks!

[ZachSaucier]

Hey clieee. Usually these types of issues occur because you're not killing ScrollTriggers when the content gets switched out. Try using something like the following before the component(s) unmount: 

ScrollTrigger.getAll().forEach(ST => ST.kill());

If you're still having issues please make a minimal demo.

[clieee]

Hey @ZachSaucier, thanks for getting back on this.

 

As of many times, to be honest, it is something other than GSAP not working. I think I found out what the issue was, and it was more about the order of initiating other parts of pages. In my case there was an issue with a component not being calculated in the right time, and therefore causing an issue with ScrollTrigger. What my solution seems to be is that I will trigger ScrollTrigger.refresh once that component is ready to fly, and that seems to make all calculations correct.

 

Thanks again for a super sweet library, it is just amazing.

 

EDIT:
Just to be clear. I did not have to use the suggestion of killing all ScrollTriggers.