Zenn
🐸

Next.js x Framer Motion : ページ遷移時にふわっと切り替わるアニメーション

2023/12/06に公開
Next.js
FramerMotion
tech

※ SVG を扱う際は注意。公式に「現在 Chrome にはバグがあり、IntersectionObserver が SVG 要素で正しく動作しません。」とある

実装の手順

執筆時の環境: next.js 13.5.5, framer-motion 10.16.5

1. Framer Motion のインストール

npm install framer-motion

2. app/template.tsx を作成

以下の内容の template.tsx を作成。これだけで、子要素で遷移時に layout.tsx > template.tsx > その個別ページ と入れ子になり、遷移するごとにふわっと出現するアニメーション (透明度が0→1に変化) が発火する。

app/template.tsx
'use client'
import { motion } from 'framer-motion'
import React from 'react'

const variants = {
  hidden: { opacity: 0 },
  enter: { opacity: 1 },
}

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      className='site-wrapper'
      variants={variants}
      initial='hidden'
      animate='enter'
      transition={{
        type: 'linear',
        duration: 2,
      }}
    >
      {children}
    </motion.div>
  )
}

参照

GitHubで編集を提案

Discussion