GSAP Animation Setup & Usage Guide

<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.20/dist/lenis.css">

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

<script>
(function () {
  var POLL_INTERVAL = 100;
  var MAX_POLLS = 50;
  var polls = 0;

  function registerAndRun() {
    if (polls++ > MAX_POLLS) return;

    if (
      typeof gsap === "undefined" ||
      typeof SplitText === "undefined" ||
      typeof ScrollTrigger === "undefined"
    ) {
      setTimeout(registerAndRun, POLL_INTERVAL);
      return;
    }

    gsap.registerPlugin(SplitText, ScrollTrigger);

    document.querySelectorAll(".title-reveal").forEach(function (el) {

      var split = new SplitText(el, {
        type: "chars",
        charsClass: "char"
      });

      gsap.set(split.chars, {
        yPercent: 110,
        opacity: 0,
        display: "inline-block",
        force3D: true
      });

      gsap.to(split.chars, {
        yPercent: 0,
        opacity: 1,
        duration: 0.55,
        ease: "power3.out",
        stagger: { each: 0.015 },
        scrollTrigger: {
          trigger: el,
          start: "top 85%",
          once: true
        }
      });

    });

    document.querySelectorAll('[class*="wf-counter"]').forEach(function (counter) {
      var textEl = counter.querySelector("*") || counter;
      var original = textEl.textContent.trim();
      var match = original.match(/^([^0-9]*)([0-9.,]+)(.*)$/);
      if (!match) return;

      var prefix = match[1];
      var numberPart = match[2].replace(/,/g, "");
      var suffix = match[3];
      var hasDecimal = numberPart.indexOf(".") !== -1;
      var target = parseFloat(numberPart);
      if (isNaN(target)) return;

      var obj = { val: 0 };

      gsap.to(obj, {
        val: target,
        duration: 1.2,
        ease: "power1.out",
        scrollTrigger: {
          trigger: counter,
          start: "top 85%",
          once: true
        },
        onUpdate: function () {
          var value = hasDecimal
            ? obj.val.toFixed(1)
            : Math.floor(obj.val).toLocaleString();
          textEl.textContent = prefix + value + suffix;
        }
      });
    });

  }

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

<script>
window.Webflow = window.Webflow || [];
window.Webflow.push(function () {
  if (window.matchMedia("(min-width:768px)").matches) {
    const lenis = new Lenis({
      duration: 0.8,
      easing: function (t) { return 1 - Math.pow(1 - t, 3); },
      smoothWheel: true,
      smoothTouch: false,
      allowNestedScroll: true
    });

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

    requestAnimationFrame(raf);
  }
});
</script>