やりたい事

それっぽい遷移時アニメーションを適応させていい感じのサイトにする。

環境

Next.js13
MicroCMSさんのテンプレート
Framer-motion

必要モジュールのインストール

今回はFramer-motionを使っていきたいと思います。

npm install framer-motion

適応させる。

サーバークライアントの仕様によってレイアウトに直接書き込む事が出来ないので新しくファイルを作成し、モジュール化します。

"use client"
import { ReactNode } from "react";
import { AnimatePresence } from 'framer-motion';
import { motion } from 'framer-motion';
import type { AppProps } from 'next/app'

interface Props {
    children: ReactNode;
}

export default function Motion({ children }: Props) {
    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
        >
            {children}
        </motion.div>
    );
}
export function AnimatePresenceMotion({ Component, pageProps, router }: AppProps) {
    return (
        <AnimatePresence mode="wait" onExitComplete={() => window.scrollTo(0, 0)}>
            <Component key={router.asPath} {...pageProps} />
        </AnimatePresence>
    );
}

これをLayout.tsxにインポートします。

import Motion from './motion';
import AnimatePresenceMotion from './motion';

export default async function ~~~
return(
  <body>
   <Motion>
    <AnimatePresenceMotion>
      <div>~~適応範囲~~</div>
    </AnimatePresenceMotion>
   </Motion>
  </body>
)

各ページで適応しているアニメーション

<motion.div>内を書き換える事で様々なアニメーションが適応できます。当サイトで使っているアニメーションは以下になります。

メインページ(フェードイン&フェードアウト)

不透明度のみ変更しています

initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}

記事ページ(下から出てくる)

要素をy軸で操作。緩急のある動作も自動でついてくれるの良いですね

initial={{ y: 150 }}
animate={{ y: 0 }}
exit={{ y: 0 }}

記述リストのホバー(ちょっと大きくなる)

whileHoverを用いることでホバーも出来ます。durationはアニメーションが完了するまでの時間です。

whileHover = {{
  scale: 1.05,
  transition: { duration: 0.3 },
}}

あとがき

他にも回転やドラッグ操作等の面白い機能があるので、興味のある方は公式ドキュメントを読んでみてください！

Next.jsでいい感じのアニメーションを適用させる