Scroll-Linked Number Counters

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { TextPlugin } from 'gsap/TextPlugin';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger, TextPlugin);

initDemoShell({ title: 'Scroll-Linked Number Counters', category: 'scroll', tech: ['gsap', 'scrolltrigger', 'textplugin'] });

const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

// Intro animation
if (!reduced) {
  gsap.set('.hero .eyebrow', { opacity: 0, y: 20 });
  gsap.set('.hero h1', { opacity: 0, y: 40 });
  gsap.set('.hero .subtitle', { opacity: 0, y: 25 });

  gsap.timeline({ defaults: { ease: 'expo.out' } })
    .to('.hero .eyebrow', { opacity: 1, y: 0, duration: 0.7, delay: 0.3 })
    .to('.hero h1', { opacity: 1, y: 0, duration: 0.9 }, '-=0.4')
    .to('.hero .subtitle', { opacity: 1, y: 0, duration: 0.7 }, '-=0.5');
}

// Counter animation configuration
const metricCards = document.querySelectorAll('.metric-card');

metricCards.forEach((card, index) => {
  const valueEl = card.querySelector('.metric-value');
  const target = parseFloat(valueEl.dataset.target);

  if (!reduced) {
    // Entrance animation
    gsap.set(card, { opacity: 0, y: 40 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: 0.8,
      ease: 'expo.out',
      delay: 0.1 * index,
      scrollTrigger: {
        trigger: card,
        start: 'top 85%',
        toggleActions: 'play none none reverse',
      },
    });
  }

  // Counter animation — synced to scroll
  gsap.to(valueEl, {
    text: target,
    duration: 1.5,
    ease: 'power1.inOut',
    snap: { text: 1 }, // Only update on integer changes
    scrub: 1, // Link directly to scroll position
    scrollTrigger: {
      trigger: card,
      start: 'top 80%',
      end: 'top 30%',
      onUpdate: (self) => {
        // Optional: add visual feedback during scroll
        if (self.direction === 1) {
          card.classList.add('scrolling');
        }
      },
    },
  });

  // Remove scrolling class when done
  ScrollTrigger.create({
    trigger: card,
    start: 'top 30%',
    onLeave: () => card.classList.remove('scrolling'),
    onEnterBack: () => card.classList.add('scrolling'),
  });
});

// Section reveals
document.querySelectorAll('.details-section h2, .details-section h3, .final-section h2').forEach((el) => {
  if (!reduced) {
    gsap.set(el, { opacity: 0, y: 30 });
    gsap.to(el, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: 'expo.out',
      scrollTrigger: { trigger: el, start: 'top 75%', toggleActions: 'play none none reverse' },
    });
  }
});

document.querySelectorAll('.details-section p, .details-section ul, .final-section p, .final-section ol').forEach((el) => {
  if (!reduced) {
    gsap.set(el, { opacity: 0, y: 20 });
    gsap.to(el, {
      opacity: 1,
      y: 0,
      duration: 0.6,
      ease: 'expo.out',
      scrollTrigger: { trigger: el, start: 'top 75%', toggleActions: 'play none none reverse' },
    });
  }
});

// Motion preference listener
window.addEventListener('motion-preference', (e) => {
  if (e.detail.reduced) {
    // Pause all animations
    gsap.globalTimeline.paused(true);
  } else {
    // Resume
    gsap.globalTimeline.paused(false);
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll-Linked Number Counters — stealthisdesign</title>
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>
  <section class="hero">
    <div class="content">
      <span class="eyebrow">Demo 36</span>
      <h1>Scroll-Linked Number Counters</h1>
      <p class="subtitle">Numeric metrics animate from 0 to target as you scroll. Metrics update in real-time, synced with scroll position using GSAP ScrollTrigger.</p>
    </div>
  </section>

  <section class="metrics-section">
    <div class="metrics-grid">
      <div class="metric-card">
        <div class="metric-value" data-target="1250">0</div>
        <div class="metric-label">Projects Completed</div>
        <div class="metric-subtext">Enterprise clients worldwide</div>
      </div>

      <div class="metric-card">
        <div class="metric-value" data-target="98.5">0</div>
        <div class="metric-unit">%</div>
        <div class="metric-label">Client Satisfaction</div>
        <div class="metric-subtext">Based on 500+ reviews</div>
      </div>

      <div class="metric-card">
        <div class="metric-value" data-target="15">0</div>
        <div class="metric-label">Years Experience</div>
        <div class="metric-subtext">In web and animation</div>
      </div>

      <div class="metric-card">
        <div class="metric-value" data-target="2.3">0</div>
        <div class="metric-unit">M+</div>
        <div class="metric-label">Lines of Code</div>
        <div class="metric-subtext">Written and deployed</div>
      </div>
    </div>
  </section>

  <section class="details-section">
    <div class="content">
      <h2>How It Works</h2>
      <p>This technique uses GSAP's <code>TextPlugin</code> combined with <code>ScrollTrigger</code> to animate numeric values from 0 to a target number while the user scrolls. The counter respects <code>scrub: true</code>, meaning the animation is directly linked to scroll position — scroll faster, the numbers update faster.</p>

      <h3>Key Features</h3>
      <ul>
        <li><strong>Scroll-synced:</strong> Counter animation is tied directly to scroll progress using <code>scrub</code></li>
        <li><strong>Decimal support:</strong> Handles percentages, decimals, and large numbers with thousand separators</li>
        <li><strong>Staggered reveal:</strong> Each card animates in sequence as you scroll past</li>
        <li><strong>Reduced motion:</strong> Counters are skipped if user prefers no motion</li>
        <li><strong>Performance optimized:</strong> Uses integer rendering to avoid excessive DOM updates</li>
      </ul>

      <h3>Use Cases</h3>
      <p>Perfect for:</p>
      <ul>
        <li>Portfolio showcase pages (project counts, years of experience)</li>
        <li>SaaS landing pages (user counts, uptime metrics)</li>
        <li>Case studies (improvement percentages, revenue impact)</li>
        <li>Company stats pages (customers served, transactions processed)</li>
      </ul>
    </div>
  </section>

  <section class="final-section">
    <div class="content">
      <h2>Integration Tips</h2>
      <p>To use this in your own projects:</p>
      <ol>
        <li>Import GSAP and TextPlugin: <code>import { TextPlugin } from 'gsap/TextPlugin'</code></li>
        <li>Register the plugin: <code>gsap.registerPlugin(TextPlugin)</code></li>
        <li>Use <code>scrub: true</code> to link animation to scroll position</li>
        <li>Customize formatting with <code>formatUnits</code> callback for decimals/prefixes</li>
        <li>Wrap in <code>ScrollTrigger</code> to trigger when card enters viewport</li>
      </ol>
      <a href="/" class="btn-back">Back to Showcase</a>
    </div>
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>