Instructions

<!-- =========================================================
     LENIS SMOOTH SCROLL
     ---------------------------------------------------------
     Lenis handles smooth scrolling and is synchronized
     with GSAP ScrollTrigger.
     ========================================================= -->

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

<script>
  // Initialize Lenis smooth scrolling
  const lenis = new Lenis({
    smooth: true,
    lerp: 0.1,
    wheelMultiplier: 0.75,
    infinite: false,
  });

  // Keep ScrollTrigger synchronized with Lenis
  lenis.on("scroll", ScrollTrigger.update);

  // Run Lenis through the GSAP ticker
  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  // Disable GSAP lag smoothing for consistent scroll synchronization
  gsap.ticker.lagSmoothing(0);
</script>

<!-- =========================================================
     GSAP NUMBER COUNTING
     ---------------------------------------------------------
     Target:
     Elements with the ".is-counting" class

     Features:
     - Counts numbers from 0 to the original value
     - Supports prefixes and suffixes
     - Supports integer and decimal values
     - Plays when ".is-counting" is added
     - Reverses when ".is-counting" is removed
     - Works with Webflow Interactions through MutationObserver
     ========================================================= -->

<script>
  window.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(ScrollTrigger);

    // Store each counting tween for later control
    const countingTweens = new Map();

    // Initialize the counting animation for a single element
    function initCounting(element) {
      // Prevent duplicate initialization
      if (element.dataset.countingInitialized) return;

      element.dataset.countingInitialized = "true";

      // Read the original text content
      const text = element.textContent.trim();

      // Extract prefix, numeric value, and suffix
      const match = text.match(/^([^\d]*)([\d.]+)(.*)$/);

      if (!match) return;

      const prefix = match[1] || "";
      const value = parseFloat(match[2]);
      const suffix = match[3] || "";

      // Starting value for the counter
      const counter = {
        value: 0,
      };

      // Create the counting tween
      const tween = gsap.to(counter, {
        value: value,
        duration: 1.8,
        ease: "power2.out",
        paused: true,

        // Snap integers to whole numbers and decimals to one decimal place
        snap: {
          value: Number.isInteger(value) ? 1 : 0.1,
        },

        // Update the displayed number on every frame
        onUpdate() {
          const currentValue = Number.isInteger(value)
            ? Math.round(counter.value)
            : counter.value.toFixed(1);

          element.textContent = `${prefix}${currentValue}${suffix}`;
        },
      });

      // Trigger the counter when the element enters the viewport
      ScrollTrigger.create({
        trigger: element,
        start: "top 100%",
        toggleActions: "play none play reverse",
        animation: tween,
      });

      // Store the tween for manual play/reverse control
      countingTweens.set(element, tween);
    }

    // Initialize elements that already have ".is-counting"
    document.querySelectorAll(".is-counting").forEach(initCounting);

    // Observe class changes caused by Webflow Interactions
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "class"
        ) {
          const target = mutation.target;

          // Start counting when ".is-counting" is added
          if (target.classList.contains("is-counting")) {
            initCounting(target);

            const tween = countingTweens.get(target);

            if (tween) {
              tween.play();
            }
          }

          // Reverse counting when ".is-counting" is removed
          else {
            const tween = countingTweens.get(target);

            if (tween) {
              tween.reverse();
            }
          }
        }
      });
    });

    // Monitor class changes throughout the entire document
    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ["class"],
      subtree: true,
    });
  });
</script>

<!-- =========================================================
     GSAP INFINITE DRAGGABLE MARQUEE
     ---------------------------------------------------------
     Target:
     Elements with the '[wb-data="marquee"]' attribute

     Features:
     - Clones content automatically for a seamless infinite loop
     - Supports custom speed via 'duration' attribute
     - Smooth pause on hover and play on leave
     - Draggable & Inertia interaction with progress mapping
     - Item scaling feedback during drag/press interaction
     - Auto-recalculates track width on window resize (debounced)
     ========================================================= -->

<script>
  window.addEventListener("DOMContentLoaded", () => {
    // Register GSAP Plugins
    gsap.registerPlugin(Draggable, InertiaPlugin);

    const initMarquee = () => {
      // Find the marquee wrapper element
      const marquee = document.querySelector('[wb-data="marquee"]');
      if (!marquee) return;

      // Extract duration attribute or fallback to default
      const duration = parseInt(marquee.getAttribute("duration"), 10) || 5;
      const marqueeContent = marquee.firstChild;
      if (!marqueeContent) return;

      // Clone content for seamless infinite looping
      const marqueeContentClone = marqueeContent.cloneNode(true);
      marquee.append(marqueeContentClone);

      // Apply initial grab cursor style
      marquee.style.cursor = "grab";

      let tween;
      let distanceToTranslate;

      // Initialize or refresh marquee animation
      const playMarquee = () => {
        let progress = tween ? tween.progress() : 0;
        if (tween) tween.progress(0).kill();

        // Calculate translation distance based on content width and gap
        const width = parseInt(getComputedStyle(marqueeContent).getPropertyValue("width"), 10);
        const gap = parseInt(getComputedStyle(marqueeContent).getPropertyValue("column-gap"), 10);
        distanceToTranslate = -1 * (gap + width);

        // Create infinite timeline
        tween = gsap.fromTo(
          marquee.children,
          { x: 0 },
          {
            x: distanceToTranslate,
            duration: duration,
            ease: "none",
            repeat: -1,
          }
        );
        tween.progress(progress);
      };

      playMarquee();

      // Pause playback on mouse enter
      marquee.addEventListener("mouseenter", () => {
        if (tween) gsap.to(tween, { timeScale: 0, duration: 0.3 });
      });

      // Resume playback on mouse leave
      marquee.addEventListener("mouseleave", () => {
        if (tween) gsap.to(tween, { timeScale: 1, duration: 0.3 });
      });

      // Proxy element used by Draggable to control progress
      const proxy = document.createElement("div");
      let startProgress = 0;

      // Configure Draggable instance
      Draggable.create(proxy, {
        type: "x",
        trigger: marquee,
        inertia: true,

        onPressInit() {
          // Pause marquee animation during user interaction
          gsap.killTweensOf(tween);
          tween.timeScale(0);
          marquee.style.cursor = "grabbing";
          startProgress = tween.progress();
          gsap.set(proxy, { x: 0 });

          // Scale down horizon items on interaction start
          gsap.to(".item-horizon-block", { scale: 0.95, duration: 0.2 });
        },

        onDrag() {
          // Map drag distance to continuous progress (0 to 1 loop)
          const progressDelta = this.x / distanceToTranslate;
          let newProgress = startProgress + progressDelta;
          newProgress = ((newProgress % 1) + 1) % 1;
          tween.progress(newProgress);
        },

        onThrowUpdate() {
          // Map inertia drag distance during momentum throw
          const progressDelta = this.x / distanceToTranslate;
          let newProgress = startProgress + progressDelta;
          newProgress = ((newProgress % 1) + 1) % 1;
          tween.progress(newProgress);
        },

        onRelease() {
          marquee.style.cursor = "grab";

          // Reset item scale back to normal
          gsap.to(".item-horizon-block", { scale: 1, duration: 0.3 });
        },

        onThrowComplete() {
          // Resume autoplay according to current hover state
          const isHovering = marquee.matches(":hover");
          gsap.to(tween, { timeScale: isHovering ? 0 : 1, duration: 0.3 });
        },
      });

      // Debounce utility to prevent high-frequency recalculations on resize
      function debounce(func, delay = 500) {
        let timer;
        return function (...args) {
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => func.apply(this, args), delay);
        };
      }

      // Recalculate track position when viewport resizes
      window.addEventListener("resize", debounce(playMarquee));
    };

    initMarquee();
  });
</script>