Framer Motion でボタンのホバーエフェクトを実装する

Framer Motion とは

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

実装環境

• React
• Framer Motion

インストール

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

以下のようなシンプルなボタンを実装します。

マウスオーバーで拡大するボタン

まずは、ボタンにマウスオーバーした際に少しだけ拡大するエフェクトを実装してみましょう。

上記のコードでは、whileHover プロパティを使ってボタンがマウスオーバー時に 1.1 倍に拡大するアニメーションを実装しています。transition の設定でアニメーションのスピードや遅延を調整できます。

マウスオーバーで奥側に回転するボタン

次に、ボタンにマウスオーバーした際に奥側に回転するエフェクトを追加します。

animate 関数で、HTML および SVG スタイルをアニメーション化できます。

rotateX プロパティを使うことで、ボタンが奥側に回転するような効果を実現しています。easeInOut を使ってスムーズに回転させることで、ユーザーに心地よいエフェクトを提供します。

マウスオーバーで色が変わるボタン

最後に、ボタンの色をホバー時に変化させるアニメーションを見てみましょう。

backgroundColor を使うことで、マウスオーバー時にボタンの色を変化させています。このようにシンプルなエフェクトを加えることで、ユーザーのインタラクションに応じた視覚的なフィードバックを提供できます。

マウスオーバーでボタンが少し浮き上がり、影がつく

こちらは、マウスオーバーでボタンが少し浮き上がり、影がつくアニメーションです。視覚的にボタンが浮いて見える効果を簡単に追加できます。