G14 · מונים בקצב הגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.center{text-align:center}

/* G14 · מונים בקצב הגלילה */
.nums{display:flex;gap:clamp(40px,5vw,110px);flex-wrap:wrap;justify-content:center}
.snum{font-size:clamp(48px,4vw,96px);font-weight:700}
.nums small{display:block;color:var(--muted, #6a6d85);font-size:15px;text-align:center}

HTML

<div class="stage tight center"><div class="nums">
<div><span class="snum" data-count="340">0</span><small>לקוחות מרוצים</small></div>
<div><span class="snum" data-count="97">0</span><small>אחוזי שביעות רצון</small></div>
<div><span class="snum" data-count="12">0</span><small>שנות ניסיון</small></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".snum").forEach(el=>{
  gsap.fromTo(el,{textContent:0},{textContent:+el.dataset.count,snap:{textContent:1},ease:"none",
    scrollTrigger:{trigger:el,start:"top 85%",end:"top 40%",scrub:true}});
});