Show & Hide navbar on Scroll using

Show & Hide the navbar when the user scroll is a really common animation. However, if you want to maximize your site’s performance, I’d recommend using GSAP. For this animation we will use GSAP Scrolltrigger plugin to detect user’s the scroll direction.

Why use GSAP over Webflow IX2 in this case?

‍

  • ‍Performance: GSAP is optimized for smooth animations across devices, handling complex transitions with minimal impact on load times.‍
  • Accessibility: GSAP supports accessibility settings, letting users minimize motion if needed.‍
  • Advanced Control: GSAP significantly expands Webflow’s capabilities, offering granular control over every detail of your animations.

You will also have control over where the animation runs—on all devices, just on desktop etc.

  1. Add the GSAP and GSAP ScrollTrigger scripts before the </body> tag in the Custom Code section within Site Settings.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  1. Insert the following code just before the </body> tag in the Custom Code section within Site Settings.
<script>
function isDesktopView() {
  return window.innerWidth >= 992; // Modify 992 to set the breakpoint at which you want the animation to apply.
}

gsap.registerPlugin(ScrollTrigger)

let navbarScrollTrigger;

function initNavbarScrollAnimation() {
  if (isDesktopView() && !navbarScrollTrigger) {
    const navbarShowAnim = gsap.from('.navbar', { // Ensure your Navbar has the .navbar class, or update the class
      yPercent: -100,
      paused: true,
      duration: 0.2
    }).progress(1);

    navbarScrollTrigger = ScrollTrigger.create({
      start: "top top",
      end: 99999,
      onUpdate: (self) => {
        self.direction === -1 ? navbarShowAnim.play() : navbarShowAnim.reverse();
      }
    });
  }
}


function destroyNavbarScrollAnimation() {
  if (navbarScrollTrigger) {
    navbarScrollTrigger.kill();
    navbarScrollTrigger = null;
  }
}

// Handle window resize
window.addEventListener('resize', () => {
  if (!isDesktopView()) {
    destroyNavbarScrollAnimation();
  } else {
    initNavbarScrollAnimation();
  }
});

initNavbarScrollAnimation();

</script>
  1. Ensure your Navbar has the .navbar class, or update the class in this part of the code: const navbarShowAnim = gsap.from('.navbar') to match your Navbar's class.