STUDIOのモーション機能とは | 使い方とイージング一覧まとめ
スマートキャンプデザインブログ、Designerのhaguriです。
先日STUDIOが3.0にアップデートされました！その中で新しく追加された「モーション機能」について紹介します。
記事後半で、STUDIO上で用意されているイージングの一覧をまとめたサイトを作成しましたので、モーションを導入するときは参考にしてみてください。
モーション機能とは
要素がホバーしたとき（マウスで触れたとき）か、要素が画面内に表示されたときに、自由に設定できる動きのことです。
使い方
モーションをつけたい要素を選択
右上のメニューからコンディション選択
コンディションは以下の2種類が選択できます。
:hover ホバーしたとき
&appear 画面内に表示されたとき
今回は、appearを選択
選択しているときは、画面に表示されていないときです。
この状態をスタート地点として、画面内に表示されたら、もとの状態にアニメーションしていきます。
極端な例をやってみます。傾きをつけたり、文字の色を変えたりしました。
この状態から、1600msかけてイージングで設定したような緩急をつけてアニメーションされていきます。
実際にこちらを見てください
https://smartcamp-toybox.studio.design/studio/easing-test
つぎに、設定できるイージングの種類を紹介します。
イージング一覧
STUDIOではデフォルトでいくつか用意されています。
ただ、それぞれどのような動きをするのかわからないので、今回は一覧ページを独自に作成したので、ぜひ参考にしてみてください。
用意しているのは、カスタマイズせずに、デフォルトで用意されているものです。（2020/06/19時点）
アニメーションはどのような動きをするのかのイメージを事前にすることが大切です。
理解するのは少しむずかしいですが、アニメーションが入るとWebサイトが一気にかっこよくなります！
ぜひ、導入してみてください。
▼ STUDIO公式サイト
WRITER： 葉栗 雄貴 ( SMARTCAMP Designer&Engineer / @thisis8911 )
あなたのサポートがデザインブログ更新の意欲になります！いただけたらブログの中で恩返しできればと思います！