GSAP Counter

DEMO

CODE

<div class="demo-stage gc-stage"><div class="gc-num" data-target="2847">0</div><div class="gc-label">HAPPY USERS</div><button class="gc-btn" type="button">↻ REPLAY</button></div>

.gc-stage { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:3rem; background:#0F0F12; min-height:280px; }
.gc-num { font-family:'Oswald',sans-serif; font-size:clamp(3rem,10vw,4.5rem); color:#E91B89; line-height:1; }
.gc-label { font-family:'Oswald',sans-serif; letter-spacing:.25em; color:#9A9A9A; font-size:.8rem; }
.gc-btn { margin-top:1rem; background:transparent; border:1px solid #E91B89; color:#E91B89; font-family:'Oswald',sans-serif; letter-spacing:.15em; font-size:.7rem; padding:.45rem 1.1rem; cursor:pointer; border-radius:4px; }

// 要 GSAP CDN
(function(){
  var el = document.querySelector('.gc-num');
  if(!el) return;
  function run(){
    var obj = { v: 0 };
    gsap.to(obj, { v: parseInt(el.dataset.target, 10), duration: 2, ease: 'power2.out',
      onUpdate: function(){ el.textContent = Math.round(obj.v).toLocaleString(); } });
  }
  run();
  var b = document.querySelector('.gc-btn');
  if(b) b.addEventListener('click', run);
})();

AI PROMPT

数値が滑らかにカウントアップする統計表示をGSAPで作って。ダミーオブジェクト {v:0} を gsap.to(obj,{ v: 目標値, duration:2, ease:'power2.out', onUpdate:()=> el.textContent = Math.round(obj.v).toLocaleString() }) でtween。DOMの数値そのものでなくオブジェクトをtweenし、onUpdateで整数化＋カンマ区切り表示するのが定番。GSAP CDNが必要。実績・KPIセクションに。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。