はじめに

Framer MotionとはReactで使用できるアニメーションライブラリです。純粋にアニメーションを実装しようとするとかなり複雑なものになってしまいますが、専用のコンポーネントを使うことで手軽にプログラムに組み込めるようになっています。

react-router-dom と組み合わせたものが多いですが、Next.js との相性も良さそうです。

前提

Next.js v10.1.3
TypeScript
framer-motion v4.1.16

framer-motionのインストール

npm でインストールできます。

npm install framer-motion

コード

_App.tsx

import React from "react";
import type { AppProps } from "next/app";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps, router }: AppProps) {
  return (
    <div>
      <AnimatePresence exitBeforeEnter>
        <Component {...pageProps} key={router.route} />
      </AnimatePresence>
    </div>
  );
}

export default MyApp;

Next.js はファイル名を元にルーティングされるのでルーターの細かい設定は要りません。（楽！）

<Component> の中身がルーティングによって変わるので、その上を<AnimatePresence>で囲います。これはコンポーネントがアンマウントされた時のアニメーションを有効にするものです。

exitBeforeEnterのPropはコンポーネントがアンマウントされるのを待ってから次のコンポーネントに移るものです。これがないと遷移元のアンマウントと遷移先のマウントのアニメーションが同時に発火してしまいます。

子要素である<Component>には必ずkeyを追加してください。値はrouter.routeが一意な値を返してくれます。

(任意のページ).tsx

import React from "react";
import { motion } from "framer-motion";

export default function Home() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ ease: "easeOut", duration: 1 }}
    >
      <...>
    </motion.div>

各ページのコードでは<motion>コンポーネントでアニメーションを実装します。アニメーションの動きは以下のようになります。

マウント時: initial → animate
アンマウント時: animate → exit

transitionではアニメーションの種類(ease)や時間(duration)などを記述します。

framer-motionの機能についてはまだ把握しきれていない部分が多いので、省略します。かなり多彩なアニメーションを作ることができるみたいなので、是非こちらを参照してみてください。

まとめ

Next.js(React)でアニメーションを実装する時にはとても有用だなと感じました。是非導入を検討してみてはいかがでしょうか。

拙いながらも、アウトプットが大事だと思い記事を書いてみました。まだまだ足りないところばかりですが、今後も記事を投稿してみようと思うのでよろしくお願いいたします！

Next.js+framer-motionで画面遷移アニメーション

はじめに

前提

framer-motionのインストール

コード

_App.tsx

(任意のページ).tsx

まとめ

参考