Next.js中Framer Motion文本动画失效及页面空白问题求助

问题重现 #

在Next.js 13.4.19（App Router）中使用Framer Motion 10.16.4实现文本动画，代码已添加'use client'指令，但页面空白，浏览器源码可见<h1>元素但无实际渲染，字体大小未达到预期的200px。

用户代码：

'use client'

import {motion} from 'framer-motion'
export default function Home() {
  return (
    <>
      <motion.h1 animate = {{fontSize:200, color: '#ff2994'}}>
        Welcome to the website
      </motion.h1>
    </>
    )
  }

package.json依赖配置：

{
  "name": "universitywebsite",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-spring/web": "^9.7.3",
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "framer-motion": "^10.16.4",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "tailwindcss": "3.3.3"
  }
}

解决方法及排查步骤 #

1. 明确字体大小单位 #

Framer Motion中fontSize属性传入纯数字时，部分场景下可能被解析为非预期单位（如rem），需明确指定px单位：

animate={{ fontSize: '200px', color: '#ff2994' }}

2. 修复容器与元素显示问题 #

Tailwind CSS默认会重置全局样式（如body的margin/padding、元素默认display），导致元素可能被挤出视口或无法正常渲染：

• 给页面添加根容器，设置最小高度和内边距，确保内容在视口内
• 强制motion.h1为块级元素

修改后代码：

'use client'

import { motion } from 'framer-motion'

export default function Home() {
  return (
    <div className="min-h-screen p-8">
      <motion.h1 
        animate={{ fontSize: '200px', color: '#ff2994' }}
        initial={{ fontSize: '24px', color: '#000' }} // 添加初始状态验证动画效果
        className="block"
      >
        Welcome to the website
      </motion.h1>
    </div>
  )
}

3. 验证Client Component有效性 #

确保'use client'指令在文件最顶部，无任何代码（包括注释）在其之前。若页面嵌套在Server Component中，需确保motion组件所在文件是独立的Client Component。

4. 开发者工具排查 #

• 打开浏览器Elements面板，查看motion.h1的Computed样式，确认font-size和display属性是否符合预期
• 检查Console面板是否有Framer Motion相关报错（如初始化失败、依赖缺失）

内容的提问来源于stack exchange，提问作者kartik kumar