scrolltrigger Scroll Snap effect on FullPage don't work with overlapping footer effect

[greenwich]

I have my page where every section needs to be 100vh height and have a `scroll-snap` effect, but the footer needs to be `fixed overlapping` from the bottom. I added minimal reproduction, but when you want to stop scrolling the footer, the page jumps on top; sometimes, it just stops on the footer and only scrolls on the footer. Something magical is happening here, please help me)

Also, I tried to move the snap effect to GSAP (based on this codepen — 

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

 ), but it started lagging very hard (maybe because of the Three.js model in the background), and on iPhone, scrollAnimation started to be limited to only 60fps (on Pro versions, where we have ProMotion 120Hz, it is very ragged). 

Will be very grateful for some help with this ☺️

See the Pen QWPzGJj by greenwich (@greenwich) on CodePen

[Rodrigo]

Hi @greenwich and welcome to the GSAP Forums!

 

Sorry for the late answer 🙏

 

Maybe something like this:

See the Pen WNWPKBp by GreenSock (@GreenSock) on CodePen

 

Is basically a fork of the demo you posted but it uses ScrollTo plugin instead of CSS' scroll-snap and also takes into account the height of the footer. In this case the footer has a fixed height, but if your footer has a dynamic height, you can easily use something like this in the end point calculation:

const footer = document.querySelector("footer");

ScrollTrigger.create({
  start: 0, 
  end: () => ScrollTrigger.maxScroll(window) - footer.clientHeight,
  snap: 1 / (panels.length - 1)
})

Hopefully this helps.

Happy Tweening!