作成日時：2023年8月1日 00:24
更新日時：2023年10月15日 21:37
Next.js
FramerMotion
Tutorial
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で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」を使用して、コンポーネントがReactのツリーから削除された際にアニメートさせることもできます。
（Reactにはライフサイクルメソッドがないので、終了アニメーションを有効にする必要がある）
https://www.framer.com/motion/animate-presence/
他にも、公式サイトの方でいろいろと例を挙げながら解説してくれてますので、
実装したい挙動が他にあれば公式サイトを覗いてみてください！
それでは、今日はここまで。
HTNCode