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 は指定した時間内にアニメーションを完了させるので、ページ全体やメニューのトランジションに向いています。
