Toggle Modal on Scroll

[ddboy19912]

I have a question related to scroll animations in react. Basically what I'm trying to achieve is when I scroll to the bottom of the page and scroll again, I want the footer to zoom into the screen like a modal and when I scroll up from the modal it returns to the last section (The last section should always be centered). This is very tricky because I'm also utilizing page snap on each section. I've tried to my understanding but not been able to achieve a concrete solution
I've created a sandbox here to showcase and I've also added a reference below, Thank you :
https://stackblitz.com/edit/stackblitz-starters-ougpwp?file=src%2FApp.tsx

[Cassie]

Hiya!

 

Is this a duplicate of this one?
 

Looks like you're the friend Nick was helping out? If that answer solves this issue let me know.

 

[ddboy19912]

I was able to solve the issue using the ScrollTrigger.observe() method
ScrollTrigger.observe({
      target: '.footer',
      type: 'wheel,touch',
      onUp: () => console.log('up'),
      onDown: () => setIsFooter(true),
    });