framer-motionでふわっと出現するコンポーネントを実装する

ファンタラクティブのエンジニアの 太田 です。
スクロールして画面内に入るとふわっと出現するコンポーネントを作るのにframer-motionを使用してみたので紹介します。
React (Next) を使用しています。

やること

スクロールすると下から上に、透明から不透明にふわっと表示するコンポーネントをReactとframer-motionを使用して実装します。

デモ

コード

親

<motion.div
  variants={{
    offscreen: { // 画面外の場合のスタイル
      y: 100,
      opacity: 0,
    },
    onscreen: { // 画面内の場合のスタイル
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5,
      },
    },
  }}
  initial="offscreen" // 初期表示はoffscreen
  whileInView="onscreen" // 画面内に入ったらonscreen
  viewport={{ once: false, amount: 0 }}
>
  <p>{children}</p>
</motion.div>

viewport.amountを0にすることで画面内に少しで要素が入るとアニメーションが発火します。

子要素も同様の処理を行っていますが、左から順番にアニメーションを実行したいのでdelayを追加で指定しています。

子

<motion.div
  variants={{
    offscreen: {
      ...
    },
    onscreen: {
      ...
      transition: {
        ...
        delay, // propで指定
      },
    },
  }}
  initial="offscreen"
  whileInView="onscreen"
  viewport={{ once: false, amount: 0 }}
>
  <p>{children}</p>
</motion.div>

実装してみた感想

• ちょっとしたアニメーションなら深い知識がなくてもわりと簡単
• intersectionObserverを使って実装するより楽そう
• アニメーションの知識があればそこそこ複雑なアニメーションもできそう
• framer-motionのドキュメント充実してるように見えるけど探しづらい気が、、