Instruction

Lenis smooth scroll & counter animation

In this template we used Lenis Smooth Scroll library, if you want to make site scroll faster or even smoother tweak values of 'wheel multiplier' and 'lerp' in site settings custom code tab!
If you want to remove smooth scroll, remove this script code from site settings.

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.20/dist/lenis.css" />
<script src="https://unpkg.com/lenis@1.3.20/dist/lenis.min.js"></script>

<script>
window.Webflow = window.Webflow || [];

window.Webflow.push(() => {

  gsap.registerPlugin(ScrollTrigger);

  // =========================
  // Lenis
  // =========================

  const lenis = new Lenis({
    duration: 1.5,
    easing: (t) => 1 - Math.pow(1 - t, 3),
    smoothWheel: true,
    touchMultiplier: 1,
    wheelMultiplier: 1
  });

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

  requestAnimationFrame(raf);

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

  ScrollTrigger.scrollerProxy(document.documentElement, {
    scrollTop(value) {
      return arguments.length
        ? lenis.scrollTo(value, { immediate: true })
        : lenis.scroll;
    },

    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight
      };
    }
  });

  ScrollTrigger.defaults({
    scroller: document.documentElement
  });

  ScrollTrigger.addEventListener("refresh", () => lenis.resize());

  window.addEventListener("load", () => {
    lenis.resize();
    ScrollTrigger.refresh();
  });

  // =========================
  // Counter Animation
  // =========================

  document.querySelectorAll("[counter-animation]").forEach(counter => {

    const text = counter.textContent.trim();

    const match = text.match(/-?\d[\d,]\.?\d/);

    if (!match) return;

    const rawNumber = match[0];

    const number = parseFloat(rawNumber.replace(/,/g, ""));

    const prefix = text.slice(0, match.index);

    const suffix = text.slice(match.index + rawNumber.length);

    const decimals = rawNumber.includes(".")
      ? rawNumber.split(".")[1].length
      : 0;

    const obj = { value: 0 };

    gsap.to(obj, {

      value: number,

      duration: 2,

      ease: "power3.out",

      snap: {
        value: decimals ? 0.01 : 1
      },

      scrollTrigger: {
        trigger: counter,
        start: "top 85%",
        once: true
      },

      onUpdate() {

        let value = decimals
          ? obj.value.toFixed(decimals)
          : Math.round(obj.value).toString();

        if (!decimals) {
          value = Number(value).toLocaleString();
        }

        counter.textContent =
          prefix + value + suffix;

      }

    });

  });

});
</script>