【CSSアニメーション】view-timeline-nameで、もっと自由に！スクロール連動アニメーションの作り方

view-timeline-nameプロパティは、スクロール可能な要素（スクローラー）内の要素（対象要素）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインの名前を定義するために使用されます。このタイムラインは、animation-timelineプロパティで参照され、タイムラインの進行に合わせてアニメーションする要素を指定します。

仕組み

対象要素にview-timeline-nameプロパティを設定します。このプロパティには、任意の名前を指定します。
アニメーションさせたい要素にanimation-timelineプロパティを設定します。このプロパティには、ステップ1で設定した名前付きビュー進行タイムラインの名前を指定します。
対象要素がスクロール領域内に入り、可視になると、名前付きビュー進行タイムラインが開始されます。
タイムラインの進行に合わせて、アニメーションさせたい要素がアニメーションされます。

例

以下の例では、#target-element要素がスクロール領域内に入り、可視になると、#animated-element要素がフェードインするアニメーションが実行されます。

#target-element {
  view-timeline-name: my-timeline;
}

#animated-element {
  animation: fade-in 2s ease-in-out forwards;
  animation-timeline: my-timeline;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

view-timeline-nameプロパティとview-timeline-axisプロパティを組み合わせて、より複雑なアニメーションを作成することができます。
view-timeline-nameプロパティは、対象要素である必要はありません。主体要素がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。

利点

複雑なアニメーションを比較的簡単に作成することができます。
スクロール位置に基づいてアニメーションをトリガーできるため、ユーザーのエンゲージメントを高めることができます。

複雑なアニメーションを作成する場合は、パフォーマンスに注意する必要があります。
view-timeline-nameプロパティは、比較的新しいプロパティであり、すべてのブラウザでサポートされているわけではありません。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>View Timeline Name Example</title>
  <style>
    #container {
      height: 500px;
      overflow-y: auto;
    }

    #target-element {
      height: 200px;
      background-color: #ccc;
      margin-bottom: 20px;
      view-timeline-name: my-timeline;
    }

    #animated-element {
      opacity: 0;
      animation: fade-in 2s ease-in-out forwards;
      animation-timeline: my-timeline;
    }

    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div id="target-element">Target Element</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div id="animated-element">Animated Element</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</body>
</html>

説明

このコードでは、以下のことが行われています。

fade-inキーフレームを使用して、アニメーションさせたい要素のフェードインアニメーションが定義されます。
animation-timelineプロパティを使用して、アニメーションさせたい要素に名前付きビュー進行タイムラインが参照されます。
view-timeline-nameプロパティを使用して、対象要素に名前付きビュー進行タイムライン (my-timeline) が設定されます。
アニメーションさせたい要素 (#animated-element) がコンテナ内に配置されます。
対象要素 (#target-element) がコンテナ内に配置されます。
スクロール可能なコンテナ要素 (#container) が作成されます。

このコードを実行すると、スクロールバーを下へスクロールすると、#target-element要素が可視になり、#animated-element要素がフェードインするアニメーションが実行されます。

以下の例では、view-timeline-nameプロパティを使用して、さまざまなアニメーションを作成する方法を示しています。

要素の色変更
対象要素が可視になると、アニメーションさせたい要素の色を変更するアニメーションを作成できます。
要素の拡大縮小
対象要素が可視になると、アニメーションさせたい要素が拡大縮小するアニメーションを作成できます。
要素の回転
対象要素が可視になると、アニメーションさせたい要素が回転するアニメーションを作成できます。

これらの例は、view-timeline-nameプロパティの可能性をほんの一例に過ぎません。このプロパティを使用して、創造性を発揮し、ユニークで魅力的なアニメーションを作成することができます。

代替方法

- 長所
  柔軟性と高度なアニメーション制御が可能
- 短所
  複雑で習得に時間がかかる
CSSプロパティの組み合わせ
- 長所
  比較的シンプルで、"view-timeline-name"に近い機能を提供
- 短所
  機能が制限されており、複雑なアニメーションには不向き
ライブラリ
- 長所
  開発時間を短縮し、複雑なアニメーションを容易に作成
- 短所
  ライブラリの習得と追加の依存関係が必要

詳細

JavaScriptとWeb Animations API

この方法は、**"view-timeline-name"**の代替として最も強力で柔軟性がありますが、習得と実装に最も複雑な方法でもあります。

例

const timeline = new Timeline();
const targetElement = document.getElementById('target-element');
const animatedElement = document.getElementById('animated-element');

timeline.addkeyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
}, {
  duration: 1000,
  easing: 'ease-in-out',
  timeline: targetElement.getBoundingClientRect().top / window.innerHeight,
});

animatedElement.style.animation = timeline;

仕組み
- JavaScriptを使用して、スクロール位置を監視し、アニメーションを更新します。
- Web Animations APIを使用して、アニメーションを定義し、制御します。

CSSプロパティの組み合わせ

この方法は、JavaScriptほど強力ではありませんが、**"view-timeline-name"**に近い機能を比較的簡単に実現できます。

例

#container {
  scroll-snap-type: y mandatory;
  scroll-snap-align: start;
}

#target-element {
  scroll-snap-stop: always;
  view-area: contain;
}

#animated-element {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

#target-element:not(:in-view) #animated-element {
  opacity: 1;
  transform: translateY(0);
}

仕組み
- scroll-snap-typeやtransformなどのCSSプロパティを組み合わせて使用します。

ライブラリ

GreenSock Animation Platform (GSAP)やAnime.jsなどのライブラリは、**"view-timeline-name"**に似た機能を提供し、複雑なアニメーションを容易に作成することができます。

注意点
- ライブラリの習得と追加の依存関係が必要
利点
- 開発時間を短縮
- 複雑なアニメーションを容易に作成

最適な代替方法の選択

開発時間を短縮し、複雑なアニメーションを作成
ライブラリ (GSAP、Anime.jsなど)
柔軟性と高度なアニメーション制御が必要
JavaScriptとWeb Animations API
シンプルで使いやすい方法
CSSプロパティの組み合わせ

代替方法を使用する場合は、フォールバックソリューションを検討する必要があります。
"view-timeline-name"は比較的新しいプロパティであり、すべてのブラウザで完全にはサポートされていないことに注意してください。

【CSSアニメーション】view-timeline-nameで、もっと自由に！ スクロール連動アニメーションの作り方

HTML

代替方法

【CSSアニメーション】view-timeline-nameで、もっと自由に！スクロール連動アニメーションの作り方