NextJS中Framer Motion部署后Chrome端动画过快问题

在Next.js项目中使用Framer Motion为落地页制作入场动画，本地运行完全正常，但部署后出现以下异常：

• Chrome浏览器中动画播放速度过快，效果不符合预期
• Firefox浏览器中动画表现正常
  尝试添加入场延迟后问题仍未解决，仅在Chrome刷新加载较慢时动画偶尔表现正常。

环境表现对比

• 本地环境：动画正常
• Firefox部署后：动画正常
• Chrome部署后：动画速度异常过快

相关代码（首页组件）

<section className="w-full h-auto flex justify-center">
    <div className="w-full max-w-[1400px] md:mx-[8rem] mx-[2rem] h-[85vh] flex flex-col md:flex-row">
        <div className="flex items-center h-full w-full justify-center">
            <div>
                <motion.h1 
                    initial={{x: -300, opacity: 0}} 
                    animate={{x: 0, opacity: 100}} 
                    transition={{duration: 0.7}} 
                    className="text-greenSteps w-full xl:text-6xl font-[800] uppercase font-raleway md:text-5xl md:w-[20rem] text-center md:text-left text-4xl mt-10 md:mt-0"
                >
                    Welcome<span className="text-heroOrange font-raleway"> Tigers</span>
                </motion.h1>
                <motion.p  
                    initial={{x: -300, opacity: 0}} 
                    animate={{x: 0, opacity: 100}} 
                    transition={{duration: 0.7, delay: 0.1}} 
                    className="max-w-[23rem] font-poppins text-greenBg mt-8 md:ml-2 ml-0 text-sm lg:text-md md:text-left text-center"
                >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                </motion.p>

                <motion.div 
                    initial={{x: -300, opacity: 0}} 
                    animate={{x: 0, opacity: 100}} 
                    transition={{duration: 0.7, delay: 0.2}}  
                    className={`md:flex md:ml-2 mt-8 rounded-lg hidden items-center justify-center p-[1px] bg-greenButton hover:bg-white w-40 mx-auto`}
                >
                    <div className="font-inter bg-greenButton text-white p-3 rounded-lg text-sm font-medium text-center hover:bg-greenHover cursor-pointer select-none w-full">
                        <p className="tracking-wider">
                            View products
                        </p>
                    </div>
                </motion.div >
            </div>
        </div>

        <motion.div 
            initial={{x: 300, opacity: 0}} 
            animate={{x: 0, opacity: 100}} 
            transition={{duration: 0.7}} 
            className="md:items-center justify-center w-full h-full flex"
        >
            <div className="xl:w-[33rem] lg:w-[27rem]  md:w-[20rem] w-[15rem] mt-3 md:mt-0">
                <Image src="/hero/phonetiger.webp" alt="Phone" height="400" width="400" className="w-full h-auto" />

                <div className="items-center mt-8 justify-center flex md:hidden">
                    <p className="text-center text-greenSteps font-bold">View products</p>
                    <MdOutlineKeyboardArrowDown className="ml-2 text-2xl"/>
                </div>
            </div>
        </motion.div>
    </div>
</section>

1. 验证Chrome硬件加速问题 #

在Chrome地址栏输入 chrome://flags/#enable-web-animation-accelerated，将选项设置为Disabled，重启浏览器后查看动画是否恢复正常。如果有效，说明是Chrome的硬件加速动画机制导致的异常。

2. 调整Framer Motion动画配置 #

• 明确指定缓动函数，避免浏览器默认的加速行为：

  transition={{duration: 0.7, ease: "easeInOut"}}
  

• 使用视口检测触发动画，确保元素进入视口后才开始播放，避免页面渲染时机问题：

  import { useInView } from "framer-motion";
  import { useRef } from "react";
  
  // 组件内逻辑
  const sectionRef = useRef(null);
  const isInView = useInView(sectionRef, { once: true });
  
  // 给父容器添加ref
  <section ref={sectionRef} className="w-full h-auto flex justify-center">
      <motion.h1 
          initial={{x: -300, opacity: 0}} 
          animate={isInView ? {x: 0, opacity: 1} : {}} 
          transition={{duration: 0.7, ease: "easeInOut"}}
          {/* 其他属性保持不变 */}
      >
          Welcome<span className="text-heroOrange font-raleway"> Tigers</span>
      </motion.h1>
      {/* 其余motion元素同理修改animate属性 */}
  </section>
  

3. 控制客户端渲染时机 #

确保动画在Next.js完成客户端hydration后才执行，避免服务端渲染与客户端渲染的时序冲突：

import { useState, useEffect } from "react";

const [isClientReady, setIsClientReady] = useState(false);

useEffect(() => {
    setIsClientReady(true);
}, []);

// 动画元素的animate属性修改为
animate={isClientReady ? {x: 0, opacity: 1} : {}}

4. 检查生产构建压缩配置 #

部分Next.js生产构建的压缩优化可能影响动画计时，可临时禁用压缩验证：

// next.config.js
module.exports = {
  compress: false,
};

验证有效后，再尝试调整为更精细的压缩配置，避免影响整体性能。

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