数値が変わっていくアニメーション
数値GSAP
0
カウントしながら目標の数値まで変わるアニメーションです。アニメーションの性質上、大きな数値への変化のほうが相性がいいです。
実装のポイント
数値の変化自体はGSAPを使うのが便利です。GSAPならオブジェクトのアニメーションも容易に可能です。
GSAPのCustomEaseを使って、アニメーションのイージングを調整し最初と最後をゆっくりし、中間はほぼ飛ばすようなイージングになっています。
CustomEase | GSAP | Docs & Learning同時に一瞬で変化する中間部分を見せないようCSSアニメーションでブラーをかけて数値が変化しているのを表しています。CSSアニメーションとGSAPのアニメーションの時間は揃えておく必要があります。
コード例
HTML
<p class="sampleText" data-target="10000" data-start="0">0</p>
CSS
.sampleText {
&.isAnimation {
animation: blurAnimation 8s ease-in-out;
}
}
@keyframes blurAnimation {
0% {
filter: blur(0);
}
30% {
filter: blur(0);
}
50% {
filter: blur(16px);
}
70% {
filter: blur(0);
}
100% {
filter: blur(0);
}
}
JavaScript
import { gsap } from "gsap";
import { CustomEase } from "gsap/CustomEase";
const DURATION = 8;
// カスタムイージング機能の登録
gsap.registerPlugin(CustomEase);
const element = document.querySelector(".sampleText");
// 初期値
const start = Number(element.dataset.start ?? 0);
// 目標値
const target = Number(element.dataset.target ?? 0);
const counter = { value: start };
element.textContent = String(start);
// イージング関数
const ease =
"M0,0 C0.485,0 0.5,0 0.5,0.042 0.5,0.064 0.5,0.63 0.5,0.958 0.5,0.987 0.329,1 1,1 ";
gsap.to(counter, {
value: target,
duration: DURATION,
ease: CustomEase.create("custom", ease),
onStart: () => {
element.classList.add("isAnimation");
},
onComplete: () => {
element.classList.remove("isAnimation");
},
onUpdate: () => {
element.textContent = String(Math.round(counter.value));
},
});
