Framer Motion で、スクロールに応じたアニメーションを実装する

スクロールに応じて、色を変え、回転させる

以下は、スクロールに応じて色を変えたり、回転させたりする例です。

このフレームワークを利用すれば、スクロールに応じた様々なアニメーションを簡単に実装できます。

実装環境

• React
• Framer Motion

Framer Motion

インストール

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

コードのポイントとしては、useScroll でスクロール量を取得し、useTransform でその値を変換してアニメーションに利用する点です。

useScroll は何をやっているのか

useScroll はページのスクロール位置をトラッキングするためのフックです。例えば、scrollYProgress を使うことで、ページ全体のスクロール位置を 0 から 1 の範囲で取得できます。

useTransform は何をやっているのか

useTransform は、ある値を別の値にマッピングするためのフックです。scrollYProgress の値に応じて、色や回転などのアニメーションプロパティを動的に変化させることができます。

スクロールでスケールと透明度を変化させる

次に、スクロールに応じて要素のスケールと透明度を変化させる例です。スクロールが進むにつれて要素が大きくなり、透明になっていきます。

スクロールに応じて位置を移動させる

次は、スクロールに応じて要素の位置を移動させる例です。ここでは、要素がスクロールに応じて X 軸方向にスライドします。

複数のオブジェクトを連動させる

最後に、複数の要素をスクロールに連動させて動かす例です。ここでは、色、スケール、回転を同時に変更し、二つの要素が同じように動くようにしています。

まとめ

Framer Motion を使うと、スクロールに応じたアニメーションを直感的に実装することができます。useScroll でスクロール位置を取得し、useTransform でその値をアニメーションに変換することで、色や回転、スケール、位置などを柔軟に変化させられます。スクロールに応じた動きが加わることで、ページにより動きがあり、視覚的に楽しい体験を提供できます。ぜひ色々とカスタマイズしてみてください！