要約

  • W3C が2022年10月に公開した最初の Scroll-linked Animations 草案は、スクロール容器の移動量と、特定の要素が表示領域を通る進み具合を別々の時間軸として示した。
  • 2023年の Scroll-driven Animations 草案では、ScrollTimeline、ViewTimeline、animation-timeline によって、経過秒数ではなく読者の位置を動きにつなぐ仕組みが整理された。

長い記事の途中にあるグラフが、二秒かけて一列ずつ棒を伸ばす。初めて見るときには気が利いている。数字に疑問を持って読み返すと、棒はすでに完成した姿で立っている。時計は一度しか上演しないと決めたらしい。読者は上へも下へも動けるのに、説明の舞台だけが一方通行だ。

W3C の2022年10月25日の初公開草案は、Scroll-linked Animations という名で二つの進み具合を分けた。スクロール進行の時間軸は、スクロール容器が始点から終点までどれほど移動したかを測る。ビュー進行の時間軸は、ある要素が表示領域に入り、そこを通り、出ていく過程を測る。記事の上端に置く読了バーなら前者。記事の半ばで現れる図の説明なら後者。どちらもページに関わるが、主役の位置は違う。

ここに秒数を割り当てなくてもよいという発想がある。スクロールを止めれば図も止まり、逆に動かせば図も巻き戻る。ブラウザーは容器や要素の位置を計測する。サイトはどの効果をどの範囲に結び、各段階で何を見せるかを決める。位置を測る仕事と、その位置に意味を与える仕事は別だ。スクロールバーは指揮棒を持てるが、楽譜までは書いてくれない。

2022年12月8日の草案は CSS からの接続を詳しくした。scroll() はスクロール進行を参照でき、名前を付けた時間軸やビュー時間軸は効果に適切な測定元を与える。実務ではまず「本当にスクロールする場所があるか」を見なければならない。内容がはみ出していない容器では、スクロール時間軸が動作しない場合がある。走る線路のない列車に、次の駅の到着時刻を尋ねても困るだけだ。

2023年4月28日の草案では、表題が Scroll-driven Animations になった。名前が少し鋭くなった。「スクロールと関係がある飾り」ではなく、位置が進行を駆動するアニメーションである。CSS でも Web Animations のインターフェースでも、この考え方を表せる。記事の中を進む距離が一つの範囲となり、その範囲に図の変化を割り当てる。写真が表示領域を通る間だけ鮮明になる、といった使い方もできる。

2023年6月6日の草案は ScrollTimeline と ViewTimeline を異なる進行源として記述し、animation-timeline との接続を示した。記事全体のスクロール量と、一枚の図が視野に入った割合を取り違えると、図が登場する前に演出だけ終わりかねない。「どこまで進んだか」には、まず「何が進んだか」が要る。

W3C の公開履歴を追うと、2022年の初稿から2023年の改訂まで、中心にあるのはその測定方法だと分かる。ブラウザーは読者の位置を数えられる。見出しをすべて回転させるべきかどうかは、編集者の判断である。読者が戻ったときに説明の要点も戻るなら、この仕組みは記事に役立つ。数センチ動くたびに文字が踊り出すなら、スクロールバーは劇場ではなく見世物小屋の支配人だ。

読者が読み直せる記事なら、図も読み直せるように動けばよい。時計は退勤した。今夜の上演速度は客席が決める。