Next.js13.4 + Framer Motion でページ遷移時の ふわっ とした動きを実装してみた。

はじめに

こんにちは！ご訪問いただきありがとうございます！
本記事では Next.js13.4 + Framer Motion で、ページ遷移の際に ふわっ と消えて ふわっ と表示されるアニメーションの実装をご紹介します。

Framer Motionとは

Framer Motionとは、デザインツールを提供しているFramer社が開発をしている、
React製アプリケーション向けのアニメーションライブラリです。

実装の流れ

• 必要なパッケージをインストールする。
• アニメーションの役割を担うコンポーネントの実装する。
• 実装したコンポーネントで動きをつけたいコンポーネントをラップする。
  • 今回はテスト用の画面全体をラップしています。

パッケージのインストール

yarn add framer-motion
or
npm install framer-motion

コンポーネントの実装

動きをつけたい要素をラップするコンポーネントを実装します。

src/components/motionWrapper/motionWrapper.tsx

'use client' // クライアントサイドでレンダリングされるコンポーネントに必要な記述

export default function MotionWrapper({
  children,
}: {
  children: React.ReactNode
}) {
  // 一意のキーを設定するためにラップした画面のパスを取得
  const pathName = usePathname()
  return (
    // アンマウント時の動きをつけるために必要な記述
    <AnimatePresence mode="wait">

　　　　　　　　　　　　//　動きをつけるために必要な記述
　　　　　　　　　　　　//　具体的な動きを記述
　　　　　　　　　　　　//　今回はopacityを使用して　ふわっ　を実現
      <motion.div
        key={pathName}
        initial={{ opacity: 0 }} //　初期状態
        animate={{ opacity: 1 }} // マウント時
        exit={{ opacity: 0 }} // アンマウント時
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}

画面の実装

画面の要素を実装したMotionWrapperでラップする。

src/app/page.tsx

import Motion from '@/components/motionWrapper/motionWrapper'
import styles from './welcome.module.css'

export default function Welcome() {
  return (
    <MotionWrapper> // 実装したアニメーションの役割を担うコンポーネント
      <main className={styles.wrapper}>
        <h1>Wellcome to MyApp !</h1>
      </main>
    </Motion>
  )
}

最後に

今回はNext.js製のアプリケーションに対して、ページ遷移時の動きをつける方法を紹介しました。

Framer Motionは既存のアプリケーションを、非常にシンプルな記述で、より リッチ にすることができる素晴らしいライブラリです。
公式サイトではアニメーションの実装例が沢山ご紹介されていますので、ぜひそちらもご覧になってみてください。

ここまでご覧いただき、ありがとうございました。
https://www.framer.com/motion/