Framer Motion で、ブックマークボタンを軽やかにアニメーション

Framer Motion とは

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

サンプルはこちら。シンプルですね。

実装環境

• React
• Framer Motion

Framer Motion の公式ドキュメントはこちらから確認できます。

インストール

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

ブックマークボタンの実装

次に、Framer Motion を使ってブックマークボタンにアニメーションを追加します。このボタンは、クリックしたときに少し縮小したり、ブックマークされた際にふわっと大きくなったりする自然な動きを持たせています。

コード解説

このコードでは、React の useState フックを使ってボタンのブックマーク状態（isBookmarked）を管理しています。また、Framer Motion の motion コンポーネントを使って、ボタンにインタラクティブなアニメーションを追加しています。

• whileTap: ボタンをクリックしたときのアニメーションです。クリックした瞬間に少し縮小 (scale: 0.9) させて、クリック感を演出しています。
• initial と animate: ボタンの初期状態を設定し、ブックマークされているかどうかでスケールを変えるアニメーションを設定しています。isBookmarked が true のときには、少し大きく (scale: 1.1) なります。
• transition: アニメーションにスプリング効果を与えており、動きに自然なバウンド感を持たせています。

さらに、React Icons の GoHeart と GoHeartFill を使って、ブックマーク状態に応じてアイコンを切り替えています。これにより、視覚的にも状態がわかりやすくなり、ユーザーがアクションをより直感的に理解できるようになっています。

まとめ

今回紹介したブックマークボタンの実装は、シンプルなコードながらユーザー体験を向上させる効果があります。Framer Motion を使うことで、React アプリにアニメーションを簡単に追加でき、インタラクションのある UI を手軽に作ることができます。ちょっとしたアニメーションでも、ユーザーにとっては大きな違いを生むことがあるので、ぜひ試してみてくださいね！