見出し画像

【Wix EditorX】アニメーション機能を使ってみた②

前回は、EditorXでのアニメーション効果の使い方・基本編をお届けしました。今回はさらに調査した情報をお届けしたいと思います。

▼ 前回の記事はこちら



サンプル:文字との組み合わせ

前回の記事では、背景・コピー・ボタンなどの要素に動きを加える例をお届けしました。
それだけでも素敵ですが、異なる動きを組み合わせることで、よりリッチなテキストアニメーションにすることも可能です。

文字:フェードイン、文字裏のハイライト:リヴィール(左から)

サンプル:アイコンを印象付ける

題材にもよりますが、画像・文字の組み合わせに別々の動きを付けて、より印象を強めることも。

文字1:フェード、文字2:ドロップ、左右画像:リヴィール(下から)

やっぱり、できないこともある…!

サンプルを考案するにあたり、Editor Xのアニメーション機能には不可能なこともあると知りました。。
まだまだ他にもあるかもしれませんが、覚え書きとして。

【注意 その1】 ループはできない

例えばマイクロインタラクションで、下へスクロールを促す矢印をつけるとした場合。

スクロールを促す矢印のループ

理想: 下へ流れるように矢印が表示され、数秒ごとにループする。
現実: 下へ流れるように矢印を表示することはできるが、一度だけ。

というように、理想を叶えるならばGIFアニメを使わなければならないので、注意が必要です。

【注意 その2】 回転はできない

その1に通じるものがありますが、最近たまに見かけるアテンションで、下記のような文字サークルをやりたい場合。

こちらも、まず単純に回転させるアニメーション効果がないことと、ループ機能がないため、理想を叶えるならばGIFアニメを使うことになります。



日々進化を続けているWix・Editor X。
まだまだできないこともありますが、念願のグラデ機能もベータ版で実装されているらしいですし、今後もアップデートに期待が膨らみます!

「こんな使い方も出来るかも」「これをやりたかったけど、出来なかった…」など、他にも発見したらまとめたいと思います。
それではまた!

この記事が参加している募集

やってみた

この記事が気に入ったらサポートをしてみませんか?