とほほのスクロールトリガーアニメーション入門

目次

スクロールトリガーアニメーションとは

使用例

下記の例では要素が画面に入ってきたときにアニメーションを開始させ、画面から消えたときにリセットします。

<style>
@keyframes my-frame {
  0%   { transform: scaleX(0.1); }
  100% { transform: scaleX(1.0); }
}
.my-box {
  height: 200px;
  background: #000;
  animation: my-frame .5s ease-in both;
  timeline-trigger: --my-trigger view() cover 10% cover 90% / cover 0% cover 100%;
  animation-trigger: --my-trigger play-forwards play-backwards;
}
</style>
<div style="height:2000px"></div>
<div class="my-box"></div>
<div style="height:2000px"></div>

トリガー定義(timeline-trigger)

スクロールトリガーを定義します。要素がどのスクロールのどの位置に到達したときにトリガーを発火するかを指定します。

timeline-trigger: <trigger-name> <trigger-source> <activation-range> [ / <active-range> ]

timeline-trigger は下記のプロパティのショートハンドです。

<trigger-name>
-- で始まるトリガー名を定義します。例：--my-trigger
<trigger-source>
スクロール対象を指定します。
scroll()
見えていない領域も含め、ページ全体のスクロール量を 100% とします。
view()
見えている領域(ビューポート)のみのスクロール量を 100% とします。
<timeline-name>
scroll-timeline-name または view-timeline-name で定義したタイムライン名を参照します。
<activation-range>
アクティベーション領域の開始位置と終了位置を指定します。要素がアクティベーション領域外から領域内に入ってきたときにアクティベーションアクションを実行します。下記の例では、ビューポートの下限から上限に向かって 10%～90% の領域をアクティベーション領域としています。対象要素がこの領域外から領域内に入ってきたときに、play-forwards (正方向にアニメーション) などのアクティベーションアクションを実行します。 
timeline-trigger: --my-trigger view() cover 10% cover 90%;
<active-range>
アクティブ領域の開始位置と終了位置を指定します。要素がアクティブ領域内から領域外に出て行ったときにアクティブアクションを実行します。下記の例では、ビューポートの下限から上限に向かって 0%～100% の領域をアクティブ領域としています。対象要素がこの領域内から領域外に出て行ったときに、play-backwords (逆方向にアニメーション) などのアクティブアクションを実行します。 
timeline-trigger: --my-trigger view() cover 10% cover 90% / cover 0% cover 100%;

cover などの種別には下記を指定できます。スクロールドリブンアニメーション の animation-range の値をそのまま使用しているため、スクロールトリガーの観点からすると少々分かりづらい仕様となっています。

個々の動作の詳細は スクロールトリガーテスト で確認してください。

アクション定義(animation-trigger)

トリガーとアニメーションを接続し、アクティベーションアクションとアクティブアクションを指定します。

animation-trigger: <trigger-name> <activation-action> <active-action>
<trigger-name>
timeline-trigger のトリガー名を指定します。
<activation-action>
アクティベート領域に入ってきたときに実行するアクションを指定します。
<active-action>
アクティブ領域からでていったときに実行するアクションを指定します。

アクションには下記を指定できます。

個々の動作の詳細は スクロールトリガーテスト で確認してください。

スコープ調整(trigger-scope)

トリガー名を他の DOM ツリーからも参照できるようにします。

trigger-scope: none | all | <trigger-name>

timeline-trigger で定義したトリガー名は通常は宣言した要素およびその子孫要素からしか参照できませんが、trigger-scope を記述すると trigger-scope を記述した要素配下で参照することができます。 

.component {
  trigger-scope: --my-trigger;
  .element-A {
    timeline-trigger: --my-trigger;
  }
  .element-B {
    animation-trigger: --my-trigger;
  }
}
Copyright (C) 2026 杜甫々
https://www.tohoho-web.com/ex/scroll-trigger.html