Framer Motion で、要素が画面に入ったらヘディングをアニメーションさせる

Framer Motion とは

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

今回は、以下のアニメーションを実装します。スクロールしてみてください。

とても滑らかなアニメーションです。

gsap と比べて

様々なホームページで、gsap が使われています。しかし、React で構築するなら、Framer Motion もおすすめです。

Framer Motion は、特に React 開発者にとって使いやすい選択肢です。一方で、gsap はより強力で多機能ですが、その分少し設定が複雑になります。

実装環境

• React
• Framer Motion

Framer Motion

インストール

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

要素内に入ったら、アニメーションさせる

スクロール後、要素が画面に入ったらアニメーションさせるには、useInView フックを使用します。

以下は、要素が画面に入ったら文字をスライドさせて表示する例です。背景色は TSX 内の Section コンポーネントに簡単に指定できるようにしています。

このコードでは、要素が画面に入った際に transform と opacity プロパティを変更してアニメーションを実現しています。isInView が true のときは通常の状態に、false のときは左にオフセットされ、透明度も 0 になります。

アニメーションを 1 回だけ実行する場合

アニメーションを 1 回だけ実行したい場合は、useInView の once オプションを true に設定します。これにより、スクロール後に一度だけアニメーションが実行されます。

useInView は、何をするフック？

useInView は、要素が画面に入ったかどうかを検知するためのフックです。このフックを使うことで、スクロール位置に応じた要素の表示やアニメーションのトリガーを設定することができます。例えば、ユーザーがセクションに到達したときにコンテンツが自然に表示されるようなインタラクションを簡単に追加できます。

まとめ

このように Framer Motion を使うことで、要素が画面に入ったタイミングでアニメーションをシンプルに追加することができます。

useInView フックを活用して、スクロールに応じたアニメーションを設定することで、視覚的なインパクトを与えることが可能ということです。