スクロールを疑似的にプロトタイプのトリガーにする方法（Figma）

今回の記事では、アニメーションなどのプロトタイプのトリガーを疑似的にスクロールにする方法について記載します。

なお、今回の方法では『マウスエンター』トリガーを使用します。
その為、マウスカーソルを使わないモバイル操作でのプロトタイプではうまく機能しません。
『ドラッグ』トリガーでのアニメーション開始については以下の記事をご確認ください。

実際の挙動

『Concept』『Cats』の部分までスクロールすると、それぞれスマートアニメートでのアニメーションが表示されます。
また、一度アニメーションで表示した部分は、上下にスクロールしても表示はそのままです。

スクロールを疑似的にトリガーにする方法

記事執筆時点ではスクロールを直接トリガーとしてプロトタイプを設定することは出来ません。
ですが、スクロールに追従する要素であるマウスカーソルを利用することで、疑似的にスクロールをトリガーとすることができます。

マウスカーソルに反応するホバー系のトリガーは以下の3種類となります。
今回は『マウスエンター』を設定していますが、スクロールで何度もアニメーションを表示させたい場合には『マウスオーバー』を設定します。

• マウスオーバー：ホバーすると発火、ホバーでなくなると元に戻る

• マウスエンター：ホバーすると発火

• マウスリーブ：ホバー状態からホバーでなくなると発火

画面として今回は下画像の3画面を作成しました。
2枚目の点線で囲われた部分をホバーすることで次の画面に遷移させています。
この際、遷移時にスクロール位置を保持するためにアートボード名のプレフィックス（接頭辞、下画像の『Desktop/』の部分）が同一になるように注意してください。

画面一覧

トリガーとなるホバー箇所

アニメーションは0%から100%の状態のバリアントを含んだコンポーネントで作成します。
画面2にConceptの、画面3にCatsのコンポーネント（0%状態のバリアント）を配置し、アフターディレイのプロトタイプを各バリアントに設定します。
こうすることで、0%から100%へと変化していくアニメーションを画面遷移時に開始させることができます。

注意点

今回の疑似的なスクロールでのトリガーはマウスカーソルの位置に依存します。
そのため、極端に画面の上部や下部にマウスカーソルを配置したままだと、思った通りにプロトタイプを動かすことができない場合があります。
ですので、こちらの意図通りのプロトタイプを他の人に見てもらうためには、「画面縦中央付近にマウスカーソルを置いた状態で」などと伝える必要があります。

マウスカーソルを画面上部や下部に置いてスクロール
アニメーションが画面外で開始されてしまう

まとめ

以上、アニメーションなどのプロトタイプのトリガーを疑似的にスクロールにする方法でした。