Framer Motion で、ハンバーガーメニューを実装する

Framer Motion とは

Framer Motion は、React アプリケーションにアニメーションを簡単に追加できるライブラリです。軽量で柔軟性が高く、エンジニアにとって自然なアニメーションを簡単に実装するためのツールを提供してくれます。アニメーションの設定も直感的で、コードもシンプルに保つことができます。

ハンバーガーメニューをクリックしてみてください。

メニュー以外をクリックしたときも、メニューが閉じるようにしています。ハンバーガーメニューの動きは、type: "spring" を指定してバネのような動きを取り入れています。とても滑らかですね。

実装環境

• React
• Framer Motion

Framer Motion

インストール

まずは Framer Motion をインストールします。

実装コード

以下は Framer Motion を使ったハンバーガーメニューの実装コードです。

以下は、CSS です。

transition type の設定

Framer Motion では、アニメーションのタイプを簡単に指定できます。今回のコードでは spring と tween の 2 種類のアニメーションタイプを使っています。

spring:

• バネのように自然な動きでアニメーションします。stiffness や damping の設定によって、どれだけ弾力があるかを調整できます。
• ハンバーガーアイコンの開閉部分に使用し、滑らかな感触を出しています。

tween:

• 一定速度でアニメーションを行います。duration で動きの速さを設定でき、easeInOut などのイージングで滑らかさも調整可能です。
• メニューのスライドイン・スライドアウトに使用し、確実にスムーズな動作を保証します。

spring は物理的な動きをシミュレートするので、インタラクティブな要素（例えばボタンのクリック）に適しており、tween は指定した時間内にアニメーションを完了させるので、ページ全体やメニューのトランジションに向いています。