§16-15Motion

Number tick animation

数値が目標値まで変化するアニメーションで表示する。

実績や合計の大きさに注目を集め、増えた印象を強められる。ランディングページの実績欄やダッシュボードの主要指標に向く。

実装のポイント

rAF で経過時間から easing 済みの値を算出し、tabular-nums で桁幅を固定して横揺れを防ぐ。画面に入ったときに IntersectionObserver で開始させるとよい。

このデモはカウンターアニメと共通です。