Webflow の After Effects と Lottie に関するシリーズの一環として、After Effects で Lottie アニメーションを作成しました。このガイドでは、Lottie アセットが表示されている間にアニメーション化されるように設定します。
私たちはこれを4つのフェーズで達成します:
- ロッティ資産を組み込む
- スクロールトリガーを確立する
- アニメーションを設定する
1. ロティ資産を組み込む
After Effects から Lottie アニメーションをエクスポートし、Webflow プロジェクトにアップロードする必要があります。アニメーションは Bodymovin を使用してエクスポートしました。この方法については、完全ガイドの手順 3 と 4 をご覧ください。
この課題では、3つのセクションを準備する必要があります。セクションガイドを参照するか、 プロジェクトを複製する.
アニメーションを見つけて追加するには、左側のサイドバーのアセット パネルで画像アイコンを選択し、アニメーションを中央のセクションにドロップします。
素晴らしい！では、トリガーを設定しましょう。
2. スクロールベースのトリガーを設定する
トリガーを追加する前に、アニメーション（別の要素ではない）が選択されていることを確認する必要があります。スクロールするとこのアニメーションが発生するようにします。右側のサイドバーの [インタラクション] パネルから、[要素トリガー] メニューを開き、[ビュー内でスクロール中] を選択します。
最後のステップでアニメーションを構成するには、インタラクション パネル内に留まります。
3. アニメーションを設定する
アニメーションを導入してこれを生き生きとさせましょう。 スクロールすると、 選ぶ スクロールアニメーションを再生 アクション メニューから選択します。スクロール アニメーションの横にあるプラス記号をタップし、ドロップダウン メニューから Lottie を選択して、最初のアクションを含めます。
スクロール アクション タイムラインで 100% のアニメーションを選択し、その下の Lottie の下で 100% に調整します。
これで、アニメーションは 0% から開始され、スクロールされて表示されなくなるまでに 100% に到達します。
ライブ プレビュー モードを有効にするか、プレビューで作業を評価して、スクロールしながらアニメーションの進行を観察できます。
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日
EN 
ZH 
ZH_CN 
KO 
JA