ウィルスタイル株式会社 / Will Style Inc.

1.HTMLにdata属性で開始値、終了値を指定する

まずは、どの値からどの値までカウントアップさせるかをHTML側で指定します。
今回はdata属性を使って、data-toに開始値、data-fromに終了値を指定しました。data属性を使うことで、その値をJavaScriptで取得することができます。

<section data-countup-trigger>
	<h1>Year</h1>
	<p data-countup-target data-from="0" data-to="2026">0</p>
</section>

2.data属性をJavaScriptで取得する

次に、HTMLで設定したdata属性の値を取得してみましょう。data属性はdatasetプロパティを使うことで取得できます。
下記のように、属性名の data- より後の部分を使用して取得します。

const countUpTargets = document.querySelectorAll('[data-countup-target]');

console.log(countUpTargets.dataset.from); // 0
console.log(countUpTargets.dataset.to); // 2026

それぞれの値が取得できましたね。

3.GSAPを使って、取得した値を1つずつ繰り上げる

次はいよいよGSAPの出番です。
今回はスクロールをトリガーとして、可視領域に入ったらカウントアップを発動させたいと思います。
まずは、要素の数だけアニメーションを動作させたいので、forEach を使ってトリガーの数だけループさせます。
2のデータ属性で取得した値も、扱いやすいようにオブジェクトとして格納しておきましょう。

const countUpTargets = document.querySelectorAll('[data-countup-target]');

countUpTargets.forEach( target =>{
	const countElement = {
		from: target.dataset.from,
		to: target.dataset.to
	}
})

続いて、gsap.to() を使って、具体的な動きを指定しましょう。
GSAPでは、第1引数には対象とする要素、第2引数にはプロパティと値を指定します。

今回の場合、data属性で指定した開始値から終了値までをカウントさせたいので、第1引数にnumberElement、第2引数にcountプロパティを指定します。
countUpTriggerをトリガーとして、要素の上部が画面の中央に来たら一斉にアニメーションが開始されます。

const numberElement = {
	count: countElement.from
}                                                                                                                                                                                                ;
gsap.to(numberElement, { // アニメーションさせたい要素（numberElement）
	count: countElement.to, // 終了値
	duration: 2, // アニメーションの時間（秒）
	ease: "power4.out", // イージングの種類
	scrollTrigger: {
		trigger: countUpTrigger, // トリガーとなる要素
		start: 'top center', // トリガーの開始位置
	}
})

最後に、コールバックを指定します。onUpdateは、アニメーション中に数字が更新されるたび（1秒間に約60回）に実行される関数です。GSAPは裏側で変数の値を書き換えるだけなので、そのままでは画面上の表示は変わりません。
そのため、onUpdateを使って、更新された最新の数字を target.textContent にその都度上書きしてあげる必要があります。

また、GSAPは滑らかに動かすために小数の状態で計算を進めます。そのまま表示すると「1.2345…」のように表示されてしまうため、Math.floor（または Math.trunc）を使って整数に整えてから画面に出しましょう。

onUpdate:()=>{
	countUpTarget.textContent = Math.floor(numberElement.count)                                                                                                                                                               ;
}

ちなみに、最後のonUpdateにて toLocaleString()を追加することで、数字をカンマ区切りにすることもできます。

countUpTarget.textContent = Math.floor(numberElement.count).toLocaleString()                                                                   ;
// 2,026