導入
Web制作において、スクロール量に連動したアニメーション（Scroll-driven Animations）はUXを向上させる強力な手法です。しかし、これまではスクロールする要素（Scroller）とアニメーションさせる要素が「親子関係」にないと、そのタイムラインを参照できませんでした。timeline-scopeは、この制約を解除し、任意の共通祖先要素を通じてタイムラインを「公開」することで、DOM構造に関係なくスクロール連動アニメーションを実装可能にする重要なプロパティです。
基礎知識
通常、scroll-timeline-nameで定義されたタイムライン名は、その要素の子孫でのみ有効です。しかし、UIデザインの都合上、ヘッダーでスクロール状態を検知し、メインコンテンツをアニメーションさせたいといったケースは少なくありません。
timeline-scopeは、名前付きタイムラインの有効範囲を、現在の要素とその子孫全体まで拡張します。これにより、姉妹要素や離れた階層にある要素同士でも、共通の親にこのプロパティを記述するだけで、タイムラインを共有できるようになります。
実装/解決策
実装のポイントは3ステップです。
1. スクロール要素に scroll-timeline-name を設定し、任意のID（例: –my-timeline）を付与する。
2. スクロール要素とアニメーション対象要素の「共通の親」に timeline-scope: –my-timeline を記述し、スコープを拡張する。
3. アニメーション対象要素で animation-timeline: –my-timeline を指定し、連携させる。
サンプルプログラム
以下のコードは、スクロール要素（左側）と、独立した要素（右側）を連動させる構成です。
応用・注意点
注意点として、現時点では全てのブラウザでサポートされているわけではないため、実装時は「Can I use」等で最新の互換性を確認してください。また、timeline-scopeは名前付きタイムラインでのみ機能し、view()やscroll()関数のような無名タイムラインには適用できません。
現場での設計においては、むやみにグローバルなスコープを広げると管理が複雑化します。「連動させたい要素同士の最も近い共通親」にのみ設定することを心がけましょう。これにより、意図しないタイムラインの干渉を防ぎ、保守性の高いコードを維持できます。
コメント