概要
スクロールで統計カードが順番にふわっと出現し、同時に数値が0から目標値まで滑らかにカウントアップする、KPI・実績紹介向けのアニメーション。
使用技術
・GSAP + ScrollTrigger（スクロール連動）
実装ポイント
・カード出現は `stagger: 0.1` で0.1秒ずつ時間差をつけ、リズムよく登場させる
・カウントアップは表示要素を直接いじらず、`{ count: 0 }` というダミーオブジェクトをGSAPで補間し、`onUpdate` で `Math.floor().toLocaleString()` して桁区切り表示。数値アニメの定番手法
・`toggleActions: “play none none reverse”`（カード）と `once: true`（数値）で、再スクロール時の挙動を出し分け。数値は1回だけ、カードは戻ると逆再生
・目標値は `data-to` 属性でHTML側に持たせ、JSは汎用ロジックのみ。数値変更にコード修正が不要な設計
コアスニペット
// 表示要素ではなくダミーオブジェクトを補間し、onUpdateで整形して反映
const elementNum = { count: from };
gsap.to(elementNum, {
scrollTrigger: { trigger: triggerSection, start: "top center", once: true },
count: to,
duration: 2,
ease: "power2.out",
onUpdate: () => {
target.textContent = Math.floor(elementNum.count).toLocaleString();
},
});