ScrollSmoother in Next.js, problem with scroll to pinned section

[Kinka]

Hi! I have Next app with ScrollSmoother. I have problem with .scrollTo function, it seems its working perfectly fine with About and Work sections, but not with Contact section which is pinned - after clicking link in Hero I see end of previous section (contact section is still under it). 

Demo:
https://stackblitz.com/edit/stackblitz-starters-tdavjg9v?file=components%2FHero.tsx

[mvaneijgen]

It looks like your contact section is fixed, so it is not part of the document flow anymore. You've have a ScrollTrigger so what you could do is instead of animating to the #contact element, scroll to the en of the ScrollTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/end 

 

Hope it helps and happy tweening! 

[Kinka]

Footer section is using pin: true and marginTop: '-100vh' - margin trick is making gsap .scrollTo scrolling to top of footer container, but now I am wondering if there is any other way to do it and be able to scroll to footer content on button click and still keep this effect 🤔

[mvaneijgen]

Yes, as I mentioned you can get the ScrollTrigger and get its .end value.

 

.scrollTo() just animates to a pixel value, giving it an elements ID just gets that pixel value from the elements position. (which is incorrect for your #contact element, because the element has a pin, eg position: fixed;)

 

Here a fork of your pen where we test if it is the ID of the element is contact and then we animate to the pixel value 9999 which is just a random value I've picked to scroll the whole page. Better is to pipe in your ScrollTrigger.end logic for your contact pin ScrollTrigger, which needs to come form your Footer.tsx file, I don't do react, so I couldn't tell you how to do that, but since it is your preferred framework I would figure that is easy for you to figure out. 

 

Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-5eea4bbj?file=components%2FHero.tsx

[Kinka]

Thank you, everything works great now 💚