yuheijotaki.com

CSS スクロール駆動アニメーションを試してみる

目次

概要

スクロールに連動したアニメーションを実現するCSS スクロール駆動アニメーションを試してみた。

CSS スクロール駆動アニメーション（Scroll-driven Animations）とは

HTML/CSSのみで実現できるCSS アニメーション/ウェブアニメーション APIが統合された機能。
GSAPでいうScrollTriggerのscrub（スクロール量や位置に応じてアニメーションを変化させる動き）が可能になる。
現在はChrome, Edge最新版のみ対応で、Safari, FireFox最新版は未対応。

デモ

分かったこと、所感

  • 大きく分けて2つのタイムライン形式がある
    • スクロール進行タイムライン（Scroll Progress Timeline）
      • animation-timeline: scroll();
    • ビュー進行タイムライン（View Progress Timeline）
      • animation-timeline: view();
      • animation-range プロパティにてビューの範囲を指定可能
    • スクロールに応じるという点は同じだが、何を基準にアニメーションを進めるかが異なる
  • デモではスクロール進行タイムラインで進捗率を表すプログレスバーとパララックスを作ってみた
  • 特に animation-range などIntersectionObserverと似たような感じ
  • HTML/CSSだけでできるのは良いなという思いもあるが、結局こういうの動きのベースができた後の調整が時間かかったりするんだよなという気持ちもある
  • スクロール芸は実装が嫌でもなくならない気配なのでブラウザ対応進んでほしい

参考記事