CSS SCROLL-DRIVEN ANIMATION

scroll() と view() は見ている進捗が違う

scroll() はスクロールコンテナ全体。view() は要素自身が表示領域を通過する進捗。 同じスクロールでも、連動する対象が変わります。

Try scrolling 同じスクロールで、2つの進捗を比較
scroll() view()
scroll() Container progress
scroll()

スクロール全体を見る

コンテナの上から下まで、どれくらいスクロールしたかを使います。 読了バーやページ全体の演出に向いています。

view()

要素自身の通過を見る

それぞれのカードが表示領域に入ってから出るまでの進捗を使います。 要素ごとの登場演出に向いています。

01 入ってくる時に動く

このカード自身の表示進捗でアニメーションします。

02 カードごとに別の進捗

ページ全体ではなく、この要素が基準になります。

03 見えたタイミングで自然

要素が通過する範囲を animation-range で調整できます。

.progress {
  animation-timeline: scroll(nearest block);
}
.card {
  animation-timeline: view(block);
  animation-range: entry 0% cover 60%;
}
Point

全体に連動させたいなら scroll()。要素ごとの見え方に連動させたいなら view()。