I’m trying to use a full screen scrolling feature on my Next.js website and I’ve found this code that uses gsap to achieve this:
https://codepen.io/GreenSock/pen/YzQOxxO

<section class="description panel blue">
  <div>
    <h1>Layered pinning</h1>
    <p>Use pinning to layer panels on top of each other as you scroll.</p>
    <div class="scroll-down">Scroll down<div class="arrow"></div></div>
  </div>
</section>


<section class="panel red">
    ONE
</section>
<section class="panel orange">
    TWO
</section>
<section class="panel purple">
    THREE
</section>
<section class="panel green">
    FOUR
</section>


<header>
   <a href="https://greensock.com/scrolltrigger">
     <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a> 
</header>

gsap.registerPlugin(ScrollTrigger);

let scrollTween;

function goToSection(i) {
  scrollTween = gsap.to(window, {
    scrollTo: {y: i * innerHeight, autoKill: false},
    duration: 1,
    onComplete: () => scrollTween = null,
    overwrite: true
  });
}

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top bottom-=2",
    end: () => "+=" + (window.innerHeight * 2 - 4),
    onToggle: self => self.isActive && !scrollTween && goToSection(i)
  });
});

window.addEventListener("wheel", cancelWhenTweening, {passive: false});
window.addEventListener("scroll", cancelWhenTweening, {passive: false});
function cancelWhenTweening(e) {
  scrollTween && e.preventDefault();
}

html, body { height: auto; }
.panel {
  height: 100vh;
  position: sticky;
  top: 0;
}

I’ve got the scrolling to work, but I’m also using NextUI’s navbar component and when I scroll down from the first section, the navbar hides.

I’ve set the navbar’s shouldHideOnScroll to false, but it still hides when I scroll to the second full page section. I think the gsap script is causing it, but I can’t really solve it as I’m not the author of it.