インタラクションとアニメーション

デザイン内のモーションとアニメーションがサイト訪問者のエクスペリエンスにどのような影響を与えるかを学び、オペレーティング システムとブラウザーのモーション設定を確認する方法を決定します。

Webflow の After Effects と Lottie に関するシリーズの一環として、Lottie アニメーションを制作しました…

After Effects でアニメーションを作成し、bodymovin プラグインを使用して Lottie JSON ファイルとしてエクスポートし、Webflow サイトでアニメーション化します。

マウスを要素の上に置いたときの位置に基づいて、カードの回転運動をアニメーション化します。

サイトに Lottie アニメーションを追加し、インタラクションを使用して再生を制御します。

ページが読み込まれると複数の要素をアニメーション化するシーケンスアニメーションを作成します。

インタラクションを再利用する方法を学びます。

親要素の上にマウスを移動したときに子要素を表示するには、ホバー操作を使用します。

ページを下にスクロールすると要素がフェードインして移動するトリガーを作成します。

トリガーとアニメーションは、あらゆるインタラクションの 2 つの主要な側面です。