ハンバーガーメニューをアニメーションで実装する方法をご紹介します。Lottieというアニメーションライブラリを使用することで、手軽にアニメーションが実装出来ます。目指すアニメーション内容は、「三」メニュークリックでハンバーガーメニューが開き、「×」をクリックするとハンバーガーメニューが閉じるようにします。
LottieはAirbnbが開発したAndroid、iOS、Web、Windows用アニメーションライブラリです。Lottieの特長は以下の通りとなります。
webflowはLottieを利用できる環境が整っているため、アニメーション利用時にはLottieを利用することをお勧めします。今回のハンバーガーメニューアニメーションもLottieを使って行います。
LottieFilesとは、様々なLottieアニメーションを無料でダウンロードして使用できるサイトです。LottieFilesからLottieアニメーションファイルをダウンロードする方法をご紹介します。
LottieFilesを利用するためには会員登録をする必要が有ります。会員登録はLottieFilesトップページのSignUpかGetStartedのどちらかから行います。名前、メールアドレス、パスワード入力後、Create accountからアカウントを作成します。
右上にアイコンが有れば会員登録完了です！基本的に無料で利用可能ですが、有料版にはクオリティの高いアニメーションファイルを利用することが可能です。まずは、無料で利用してみて有料の価値があると判断すればプランを切り替えてみるのも良いでしょう。
アニメーションファイルの探し方の一例をご紹介します。DiscoverからFree Ready-to-use Animationsを選択。もしくはSearch for animationsから検索ワードを入力して探す方法です。ただし、海外サイトのため、検索ワードは英語です。
試しに検索ワード「humburger menu」で検索してみました。上画像のようにハンバーガーメニューのアニメーションファイルが見つかりました。これらから自分好みのファイルを編集したりダウンロードが可能です。
好みのファイルをクリックすると、編集画面が表示されます。上部にはプレビュー画面、赤枠の下部で簡易編集が可能です。
好みのファイルをクリックし、右上のDownloadを選択します。いくつかの保存形式が有りますが、一番上部のLottie JSONを保存します。
LottieFilesで入手したJSONファイルをwebflowで設置してみます。まずはAssetsにJSONファイルをアップロードします。
Add Elements > Media > Lottie Animationから入手したJSONファイルを設置します。ナビゲーションバーにハンバーガーメニューを設定する方法はこちら。
1回目のクリックでは、「三」（ハンバーガーメニュー）が「×」になる動作を設定します。
２回目のクリックでは、「×」が「三」（ハンバーガーメニュー）に戻る動作を設定します。
プレビュー画面より実際にハンバーガーメニューをクリックしてみてください。1回目のクリックで「×」、2回目のクリックで「三」（ハンバーガーメニュー）に戻る動作をしていればOKです！ただし、これでは実際のメニューが開かれていませんよね？次回はハンバーガーメニューからフルスクリーンメニューが登場する方法をご紹介します。
05.png)
007.png)
10.png)
06.png)
.png)
2.png)
1.png)