GSAP doesnt work with next.js

[aronanol]

Hi guys, hope you're doing well.

I got a problem right now by integrating gsap with next.js

What I want to achieve:

- Got <body/> and <html/> overflow:hidden to avoid mobile adress bar to show/hide and to avoir to use normalizeScroll

- Using a scroll proxy with ScrollTriggers and add a smooth effect on them with Lenis 

- ScrollTrigger.update on my main RAF to got lenis, gsap, and three.js sync

Here you got isolated code : https://stackblitz.com/edit/stackblitz-starters-g1esexap?file=app%2FComponents%2FDom%2FMaSection.tsx 

I am currently stuggling on this one, I got a vanilla version, everything works well, but when pass the code to next.js It seems like gsap scrollTriggers are no longer working. 

Help yould be appreciated to found a way to achieve that

[Rodrigo]

Hi.

 

Unfortunately your demo is far from being minimal, we just don't have the time resources to go through all that code trying to find what could be the issue. Also this seems to be related to this thread as well:

 

As mentioned in that thread normalizeScroll is the solution we have for the mobile URL bar show/hide issue. Also as mentioned in that thread you can try the ignoreMobileResize option and see if that helps you.

 

In desktop/laptop I can see the project and it works without any issue, but I can't seem to be able to open it on my devices, but again as mentioned you could try ScrollSmoother for this.

 

Sorry I can't be of more assistance 😞