はじめに

Next.js13.4で作成している私のHTNCode Official SiteへFramer Motionを導入しました。

Framer Motionとは、ページを遷移したりした際に、ふわっと表示されたりする、

あの挙動が実装できるもので、Framer社が開発をしています。

https://www.framer.com/motion/

React製アプリケーション向けのアニメーションライブラリとなっており、

非常に簡単な記述でリッチな挙動を組み込むことが可能です。

ReactやNext.jsを使ってるなら入れておいて損はないかと。さっそく実装までの流れを見ていきましょう。

パッケージをインストールする

まずはパッケージをインストールしていきます。npmもしくはyarnが使えます。

npm install framer-motion
or
yarn add framer-motion

動きを定義するコンポーネントを作成

比較的記述はシンプルなので、動きをつけたいコンポーネントに直接書き込んでいってもよいのですが、

お勧めとしては、動きをつけたい要素をラップするためのコンポーネントを作成しておくことです。

そうすることで流用可能になりますし、挙動のメンテナンスも1回で済むので楽になります。

"use client";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";

export default function MotionWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  // ラップした画面のパスを取得し、一意のキーを設定する
  const pathName = usePathname();
  return (
    <motion.div
      key={pathName} //一意のキーを設定
      transition={{ duration: 1.2 }} //transitionでふわっと具合を調整
      initial={{ opacity: 0 }} //　初期状態
      animate={{ opacity: 1 }} // マウント時
    >
      {children}
    </motion.div>
  );
}

layout.tsxでimportしてラップ

今回は各ページ全体がマウントされた際にふわっと表示させるようにしたいので、

layout.tsxでbody内のコンポーネント全体をラップします（関係のない記述部分は省略しています）。

import Motion from "@/app/motionWrapper/motionWrapper"; //importする


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <Motion>
          <main>{children}</main> //これをラップ
        </Motion>
      </body>
    </html>
  );
}

完成

開発サーバーを立ち上げて、意図した挙動になっているか確認しましょう。

補足：AnimatePresence

ちなみに、今回はアンマウント時の挙動は実装しませんでしたが、

「AnimatePresence」を使用して、コンポーネントがReactのツリーから削除された際にアニメートさせることもできます。

（Reactにはライフサイクルメソッドがないので、終了アニメーションを有効にする必要がある）

https://www.framer.com/motion/animate-presence/

他にも、公式サイトの方でいろいろと例を挙げながら解説してくれてますので、

実装したい挙動が他にあれば公式サイトを覗いてみてください！

それでは、今日はここまで。

HTNCode