Framer Motion で、トースト通知を実装する

Framer Motion とは

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

Show Toast ボタンを押してみてください。

今回は、上記のトースト通知のアニメーションを実装します。トースト通知は、ユーザーにメッセージを表示するための UI パターンで、画面の上部や下部にメッセージを表示し、一定時間が経過すると自動的に消えるような仕組みです。アプリケーションでは、何かを更新したときなど、ユーザーに重要な情報を伝えるために使われることが多いですね。

Framer Motion を使えば、トースト通知のアニメーションも非常に簡単に実現できます。

実装環境

• React
• Framer Motion

Framer Motion 公式ページ

インストール

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

トースト通知の実装

以下のコードでは、ボタンをクリックするとトースト通知が表示され、数秒後に自動的に閉じるアニメーションを実装しています。

motion とは？

Framer Motion の motion は、通常の HTML 要素や React コンポーネントをアニメーション可能な要素に変換するためのものです。motion.div のように使うことで、簡単にアニメーションを追加できます。

この例では、トースト通知をスライドイン・スライドアウトさせるために使っています。

各プロパティの説明

以下、アニメーションで使用した各プロパティの説明です。

initial

初期状態を設定します。この場合、x 軸方向に -100% 移動し、透明度は 0 に設定されています。これにより、トーストが画面外から表示されるような効果を作り出しています。

animate

アニメーションの最終状態を設定します。この場合、x 軸方向に 0 に移動し、透明度は 1 に設定されています。これにより、トーストが画面内にスライドインして表示されます。

exit

アニメーションが終了した後の状態を設定します。この場合、x 軸方向に -100% 移動し、透明度は 0 に設定されています。これにより、トーストがスライドアウトして消える効果が得られます。

transition

アニメーションの設定を行います。この場合、duration は 0.5 秒、ease は easeOut に設定されています。これにより、スムーズなアニメーションを実現しています。

まとめ

Framer Motion を使うことで、トースト通知のようなインタラクティブな UI 要素を簡単に追加できます。この例では、motion.div を使い、initial、animate、exit、transition の各プロパティを設定することで、自然なスライドイン・スライドアウトのアニメーションを実装しました。ユーザーに重要なメッセージを伝える際に、視覚的にわかりやすい方法で通知できるため、ぜひプロジェクトに取り入れてみてください。