Instructions

The Navbar Sliding Pill creates an animated highlight that slides under navigation links as the user hovers over them.

You can edit the code by going into any Page Settings → Before </body> tag.

function initNavbarPill() {
  const navLinks = document.querySelectorAll(".navbar---link");
  const container = document.querySelector(".navbar---links");

  if (!navLinks.length || !container) return;

  const pill = container.querySelector(".navbar---pill");

  if (!pill) return;

  let isVisible = false;

  gsap.set(pill, { autoAlpha: 0 });

  const slideX = gsap.quickTo(pill, "x", { duration: 0.2, ease: "power3.out" });
  const slideWidth = gsap.quickTo(pill, "width", { duration: 0.1, ease: "power3.out" });

  navLinks.forEach((link) => {
    link.addEventListener("mouseenter", () => {
      if (!isVisible) {
        gsap.set(pill, { x: link.offsetLeft, width: link.offsetWidth });
        gsap.to(pill, { autoAlpha: 1, duration: 0.15, ease: "power2.out" });
        isVisible = true;
      } else {
        slideX(link.offsetLeft);
        slideWidth(link.offsetWidth);
      }
    });
  });

  container.addEventListener("mouseleave", () => {
    gsap.to(pill, {
      autoAlpha: 0,
      duration: 0.15,
      ease: "power2.in",
      onComplete: () => { isVisible = false; }
    });
  });
}

initNavbarPill();

You can modify the values below to adjust the slide speed and easing of the pill.

// Controls how fast the pill slides horizontally to the next link
const slideX = gsap.quickTo(pill, "x", { duration: 0.2, ease: "power3.out" });

// Controls how fast the pill resizes to match the link width
const slideWidth = gsap.quickTo(pill, "width", { duration: 0.1, ease: "power3.out" });

// Controls how fast the pill fades in on hover
gsap.to(pill, { autoAlpha: 1, duration: 0.15, ease: "power2.out" });

// Controls how fast the pill fades out when the mouse leaves
gsap.to(pill, { autoAlpha: 0, duration: 0.15, ease: "power2.in" });

To temporarily disable the code, comment out the whole block like this.

<!-- 
function initNavbarPill() {
  ...
}

initNavbarPill();
-->

Lenis creates a smooth scrolling experience across the entire site.

ou can edit the code by going into any Page Settings → Before </body> tag.

const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,
  wheelMultiplier: 1,
  infinite: false,
});

lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.lagSmoothing(0);

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

You can modify the values below to adjust the easing and behavior.

const lenis = new Lenis({
  smooth: true,       // Enable or disable smooth scrolling entirely (true / false)
  lerp: 0.1,          // Smoothing intensity — lower = smoother, higher = snappier (0.01 – 1)
  wheelMultiplier: 1, // Scroll speed multiplier for mouse wheel (e.g. 0.5 = slower, 2 = faster)
  infinite: false,    // Enable infinite scrolling (true / false)
});

To temporarily disable the code, comment out the whole block like this.

<!-- 
const lenis = new Lenis({ ... });
...
requestAnimationFrame(raf);
-->

The Text Reveal animates heading characters from a muted grey to full colour as they scroll into view, creating a progressive reveal effect.

You can edit the code by going into any Page Settings → Before </body> tag.

function initTextReveal() {
  const quoteHeadings = document.querySelectorAll('.quote-01---heading');
  if (quoteHeadings.length === 0) return;

  quoteHeadings.forEach((heading) => {
    const textSplit = new SplitText(heading, {
      type: 'words, chars',
      charsClass: 'split-char',
      wordsClass: 'split-word',
    });

    // Each char starts at background color
    gsap.set(textSplit.chars, {
      color: '#191A1C',
    });

    // Animate each char individually on the timeline
    gsap.to(textSplit.chars, {
      color: '#C2C6CC',
      duration: 0.1,
      ease: 'power2.inOut',
      stagger: {
        each: 0.015,
        from: 'start',
      },
      scrollTrigger: {
        trigger: heading,
        start: 'top 75%',
        end: 'top 35%',
        scrub: 0.5,
      },
    });
  });
}
initTextReveal();

You can modify the values below to adjust the colours, timing and scroll trigger positions.

// The starting (unrevealed) colour of each character
gsap.set(textSplit.chars, { color: "#191A1C" });

gsap.to(textSplit.chars, {
  color: "#C2C6CC",   // The final (revealed) colour of each character
  duration: 0.1,      // Duration of each individual character's transition
  ease: "power2.inOut",
  stagger: {
    each: 0.015,      // Delay between each character animating (lower = faster cascade)
    from: "start"     // Direction of the cascade: "start", "end", or "center"
  },
  scrollTrigger: {
    trigger: heading,
    start: "top 75%", // When the animation begins (relative to viewport)
    end: "top 35%",   // When the animation ends (relative to viewport)
    scrub: 0.5        // Smoothness of scroll-linked animation (higher = more lag)
  }
});

To temporarily disable the code, comment out the whole block like this.

<!-- 
function initTextReveal() {
  ...
}

initTextReveal();
-->

The Countdown Timer displays a live countdown to a set target date, with a flip animation each time a value changes.

You can edit the code by going into any Page Settings → Before </body> tag.

// Set your target date and time below:
// Year: 2026 | Month: 11 (0=January, 11=December) | Day: 31 | Hour: 23 | Minute: 59 | Second: 59

const targetDate = new Date(2026, 11, 31, 23, 59, 59);

You can modify the values below to change the target date and flip animation behavior.

// Update these values to change the countdown target
// Note: months are 0-indexed (0 = January, 11 = December)
const targetDate = new Date(2026, 11, 31, 23, 59, 59);
//                           year  month day  hour  min  sec

// Controls the flip animation speed when a number changes
gsap.to(newElement, {
  yPercent: 0,
  duration: 0.5,  // Duration of the flip (in seconds)
  ease: 'expo.out'
});

// Controls the completion animation when the countdown reaches zero
gsap.to(allTimeElements, {
  scale: 1.1,         // How much the numbers scale up on completion
  duration: 0.5,
  ease: 'back.out(1.7)',
  stagger: 0.1,       // Delay between each unit animating
  yoyo: true,
  repeat: 1
});

To temporarily disable the code, comment out the whole block like this.

<!-- 
const targetDate = new Date(2026, 11, 31, 23, 59, 59);

function initCountdownTimer() {
  ...
}

initCountdownTimer();
-->

The Text Scramble animation cycles characters through random letters before locking into the final text, triggered when the element scrolls into view.

You can edit the code by going into any Page Settings → Before </body> tag.

Add the data-scramble attribute to any text element in Webflow to opt it into the effect:

<h2 data-scramble>Your heading here</h2>

You can modify the values below to change the scramble behavior.

// Characters cycled through during the scramble phase
const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

// Number of random frames each character shows before locking into place
const SCRAMBLE_FRAMES = 14;

// Duration (seconds) between each scramble frame per character
// Lower = faster scramble, Higher = slower scramble
const FRAME_DURATION = 0.02;

// Stagger (seconds) between each character locking in, left → right
// Lower = characters lock in almost simultaneously
const LOCK_STAGGER = 0.15;

To temporarily disable the code, comment out the whole block like this.

<!-- 
function initTextScramble() {
  ...
}

initTextScramble();
-->

Display a full page animation on page load.

To edit the preloader, go to the Home page → Utility folder → open Loader - Global. Select the element with the class Loader - Global, change its display from none to flex to make it visible.

To change the logo, either update the SVG inside the Logo - Brand component or replace it with your own image/SVG.

To temporarily disable the preloader, go to the Home page → Utility folder → open Loader - Global. Select the element with the class Loader - Global, set Loader - Global display to none so the loader stays hidden on publish.