GSAP 数字カウントアップ
GSAP のトゥイーンで 0 から目標値まで数字を滑らかにカウントアップ。実績・統計セクションに。toLocaleString で3桁区切り表示。
解説
このスニペットは、0 から目標の数値まで滑らかに数字を増やしていくカウントアップ表現を GSAP で実装したものです。実際の数字テキストを直接動かすのではなく、{v:0} という入れ物のオブジェクトを gsap.to でトゥイーンし、その値が更新されるたびに onUpdate で textContent に書き戻す方式です。目標値は各要素の data-to 属性で持たせているため、HTML を書き換えるだけで表示する数を変えられます。toLocaleString を通すことで、12,800 のように 3 桁ごとの区切りが自動で入ります。
使いどころ
- ユーザー数や導入実績などの数値を見せる統計セクション
- 満足度やパーセンテージを印象的に表示する実績紹介
- 受賞歴や店舗数などの数えられる成果のアピール
増える速さは duration、なめらかさは ease で調整できます。ここでは power2.out で最後にゆっくり収束させています。注意点として、本番では repeat:-1 を外し、ScrollTrigger で要素が画面に入ったときに一度だけ再生するのが自然です。小数を扱う場合は Math.round を桁数指定に変えてください。動きを抑えたい利用者には prefers-reduced-motion を見て即座に最終値を表示する配慮も有効です。
使用例・適したシーン
- SPA / PJAX 風 Web サイト
- ポートフォリオの遷移演出
よくある質問
表示する数字を変えるには
各要素の data-to 属性の値を変えるだけです。JavaScript はその属性を読み取って目標値にするため、コードを触らずに HTML の数値だけ書き換えれば反映されます。
3 桁区切りのカンマを消すには
onUpdate 内の toLocaleString を外して Math.round の結果をそのまま入れれば、区切りなしの数字になります。逆に通貨記号や単位を足したいときはこの箇所で文字列を組み立てます。