Instructions

This template incorporate GreenSock Animation Platform (GSAP) to improve the website experience.

Custom Code Settings

To see a full and customize the custom code applied in this template, you can simply go to site settings > custom code > footer code block.

Lenis Smooth Scrolling

We use the Lenis Smooth Scrolling Effect to enhance the experience and seamless movement of each section.

<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>

<script>
  // Lenis Smooth Scroll
    const lenis = new Lenis({ 
    smooth: true, 
    lerp: 0.068, 
    wheelMultiplier: 1, 
    infinite: false 
  });

  lenis.on('scroll', ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
</script>
- Change The Scrolling Effect

To  change the scrolling effect speed, you can simply change the value of lerp. The lower number of lerp, the scroll will be heavier.

- Fully Remove the Lennis Scroll

If you don't want to use the lenis smooth scrolling effect, you may delete the custom code script for lenis.

Hide Navbar on Scroll

Since the navbar height and design of this template are kind of unusual, we incorporate the scroll-down effect to hide the navbar and make it appear while scrolling up. This can prevent the navbar from disrupting users' visual perception of the content.

<script>
  // Navbar Scroll Effect
  (() => {
    "use strict";

    const CONFIG = {
      selector: "[data-navbar], .w-nav",
      offset: 80,
      threshold: 8,
      duration: 0.5,
      ease: "power2.out",
    };

    function init() {
      if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
        console.warn("[navbar] GSAP or ScrollTrigger failed to load.");
        return;
      }
      gsap.registerPlugin(ScrollTrigger);

      const navbar = document.querySelector(CONFIG.selector);
      if (!navbar) {
        console.warn("[navbar] No navbar found for selector:", CONFIG.selector);
        return;
      }

      const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      const duration = reduceMotion ? 0 : CONFIG.duration;

      let isHidden = false;
      let lastY = ScrollTrigger.isTouch ? window.scrollY : window.pageYOffset;

      // Don't hide while the Webflow mobile menu is open
      const isMenuOpen = () => !!navbar.querySelector(".w-nav-button.w--open");

      const animate = (hide) => {
        if (isHidden === hide) return;
        isHidden = hide;
        gsap.to(navbar, {
          yPercent: hide ? -100 : 0,
          duration,
          ease: CONFIG.ease,
          overwrite: "auto",
        });
      };

      ScrollTrigger.create({
        start: 0,
        end: "max",
        onUpdate: (self) => {
          const y = self.scroll();

          // Near the top of the page: always show
          if (y <= CONFIG.offset) {
            animate(false);
            lastY = y;
            return;
          }

          // Ignore tiny movements
          if (Math.abs(y - lastY) < CONFIG.threshold) return;

          if (self.direction === 1 && !isMenuOpen()) {
            animate(true);   // scrolling down → hide
          } else if (self.direction === -1) {
            animate(false);  // scrolling up → show
          }
          lastY = y;
        },
      });

      // Accessibility: keyboard focus inside the navbar always reveals it
      navbar.addEventListener("focusin", () => animate(false));
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", init);
    } else {
      init();
    }
  })();
</script>
- Navbar Target

The target of this navbar are using attribute named [data-navbar] on main .navbar element.

- Change the effect

Changing the effect on this code may be complicated for those who unfamiliar with GSAP code. So we suggest to edit the treshold, duration, ease attribute as you wish.

- Removing The Effect

We recommend leaving this effect in place for the experience of users unless you are re-designing the navbar. But if you still want to remove it, just stop the effect by changing the value of the [data-navbar] attribute to false, or just delete the attribute.