スクロールアニメーションを設定する（Scroll Effect）

注意：Scroll Effectは現在、ベータ版として提供中の公開サイト新基盤には未対応です。対応完了次第、公開サイト新基盤 (beta) Issues ページを更新します。

スクロールアニメーションを設定する

スクロールプレビューモードでは画面が次のように変化し、スクロールしながらアニメーションの動きを確認できます。

スクロールアニメーションは、アニメーションのトリガー方式をタイムラインとして選択します。条件に応じて、[ビュー]タイムラインと[スクロール]タイムラインを使い分けます。

タイムライン	説明	使い分け
ビュー	要素が画面に入ってから出るまでの区間に連動します。	個別の要素をアニメーションさせたい場合に使用します。
スクロール	直近の親のスクロール位置（0〜100%）に連動します。	ページの進行度に応じた演出を行いたい場合に使用します。

キーフレームとは、スクロールに合わせて「どこで・どう変化するか」を記録するための節目のポイントです。

スクロールアニメーションでは、このキーフレームごとに見た目（位置や不透明度など）を設定し、その間を自動でつないでアニメーションを作ります。

基本的には「0%（アニメーションが始まるときの状態）」と「100%（アニメーションが終わるときの状態）」の 2 つのキーフレームを設定します

キーフレーム間の [+] ボタンや[スタイルを追加]をクリックすると、中間キーフレームを追加できます。中間キーフレームを追加すると、途中で変化する複雑なアニメーションも作成できます。

ビュータイムラインを使うときは、「画面のどのタイミングで 0〜100% のアニメーションを進めるか」をトリガーで指定します。

トリガーアイコンをクリックするとポップオーバーが開き、トリガーの種類やパーセンテージを細かく調整できます。

例えば「入る時 50%」に設定すると、要素が半分画面に入った時点からアニメーションを開始できます。

トリガー	説明	活用例
入る時 (entry)	要素が画面に入り始める区間を基準にします。	画面の端からスッと入ってくる間にアニメーションを進めたいときに使います。
出る時 (exit)	要素が画面から出始める区間基準にします。	画面外に消えていくときにアニメーションさせたい場合に使います。
内包 (contain)	要素が完全に画面内にある区間を基準にします。	画面中央付近にいる間だけ、ゆっくり動かしたいときに使います。
入〜出 (cover)	要素が入り始めてから出終わるまでの区間全体に対応させます。	入ってくるところから、画面外に出るところまでを一つの長いアニメーションにしたい場合に使います。

各キーフレームに付随する[スタイル追加]ボタンから、各キーフレームごとにスタイルを設定できます。

移動と不透明度など複数のスタイルを組み合わせることで、フェードしながらスライドインするなどの表現が可能です。

設定可能なスタイルは以下の通りです。各スタイル項目横の [↩] ボタンをクリックすると、スタイルを削除できます。