/Studioでスクロールアニメーションを設置する方法

今回はこの記事用に新規プロジェクトを立ち上げて簡単なデザインを作って見ました。

今回は、下の3つ画像が並んでコンテンツがスクロールした際にゆっくりフェイドインするアニメーションを追加したいと思います。

まずはアニメーションを追加したいコンテンツを指定するのですが、コンテンツ自体をクリックするよりは、左メニューのレイヤー①をクリックしてコンテンツ指定する方法が確実です。

今回は、②のListをクリックします。するとコンテンツ側の背景が薄い緑になり、指定していることが確認できます。

次に右上の条件スタイル→出現時③をクリックします。

右のメニューが変わって、アニメーションを指定できるようになります。今回はスクロールした際に下からフェイスブックしたいので、一番上の「下からフェイドイン」をクリックします。

あとは、右上の公開ボタンの左横にある再生ボタンをクリックするとプレビュー画面が開くので、そちらで実際のアニメーションを確認すればOKです。

下記が実際のプレビュー画面を録画したものですが、コンテンツが見える位置までスクロールするとゆっくりフェイドインするのが分かると思います。