Framer Motion で、スクロールしたら上部に通知を表示する

実装環境

• React
• Framer Motion

例

以下をスクロールしてみてください。スクロールすると上部に通知が表示されます。

Framer Motion とは

Framer Motion は、React アプリケーションにアニメーションを簡単に追加できるライブラリです。アニメーションを設定するための直感的な API を提供し、簡単にインタラクティブな動きを実現できます。

Framer Motion 公式ページ: Framer Motion

インストール

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

スクロールしたら通知を表示する

以下のコードでは、スクロール位置が 100px を超えると上部に通知が表示されるアニメーションを実装しています。

ソースコードの解説

このコードでは、useState と useEffect を使ってスクロール位置を監視し、一定以上スクロールしたときに通知を表示しています。Alert コンポーネントは motion.div を使って作られており、アニメーションの状態を設定するプロパティによって、通知がスライドイン・スライドアウトする動きを実現しています。

プロパティの解説

initial

initial プロパティは、アニメーションの初期状態を設定します。この場合、y 軸方向に -100 の位置（つまり、画面外）に設定し、透明度を 0 にしています。これにより、通知が初めて表示される際に上から滑り込んでくるような効果を作り出します。

animate

animate プロパティは、アニメーションの最終状態を指定します。この場合、y 軸方向の位置が 0 になり、透明度が 1 になるため、通知が画面内に表示されるようになります。

exit

exit プロパティは、コンポーネントが消えるときのアニメーションを設定します。この場合、y 軸方向に -100 の位置に戻り、透明度を 0 にすることで、通知がスライドアウトして消えていく効果を実現しています。

transition

transition プロパティではアニメーションの速度やタイミングを設定します。この例では、duration は 0.5 秒、ease は easeOut に設定されており、スムーズに通知が表示され、消えていくようにしています。

まとめ

Framer Motion を使えば、スクロール時に通知を表示するような UI を簡単に実装できます。useEffect でスクロールを監視し、motion.div を使って自然なアニメーション効果を追加することで、視覚的なフィードバックをユーザーに提供できます。こういった通知は、重要な情報を見逃さないようユーザーに伝える際に非常に有用です。