Issue with demo of Variable height stacked pinning with added footer

[DaphneX]

Hi all, I'm new here and used one of the demos to create snap panels. 

The problem is my page also contains a footer which jumps back up when you reach the end of the page. I forked the demo to include a footer in order to demonstrate the issue and get some insights on how to fix it. I tried various css of gsap changes with no success. 

Really sorry if this has been already asked, I searched the forum but couldn't find something relevant.

 

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

    

 

And here's my fork with the added footer where you can see the bouncing back when you reach the end of the page. 

 

 

See the Pen KKYMbWr by Daphne-Christoforidou (@Daphne-Christoforidou) on CodePen

[Rodrigo]

Hi @DaphneX and welcome to the GSAP Forums!

 

What's causing this is the snap functionality baked into that particular demo, when you add a footer the max height of the scroller is no longer tied to the amount of panels so you have to consider that into the math of the snap logic.

 

This seems to work the way you intend:

ScrollTrigger.create({
  snap: {
    snapTo: (progress, self) => {
      let panelStarts = tops.map(st => st.start), 
          snapScroll = gsap.utils.snap(panelStarts, self.scroll());
      // If the current scroll is past the last panel don't snap
      if (self.scroll() > panelStarts[panels.length - 1]) {
        return false;
      }
      return gsap.utils.normalize(0, ScrollTrigger.maxScroll(window), snapScroll);
    },
    duration: 0.5
  }
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[DaphneX]

Thank you Rodrigo ! It works indeed !