React项目中Framer Motion h1组件偏移问题求助

问题根源 #

你在initial配置中设置了x: -100，但animate里未显式指定x的最终值为0，Framer Motion不会自动将未声明的属性重置为初始状态；同时Bootstrap的全局样式可能修改了h1的默认布局逻辑，和transform的定位规则产生冲突，最终导致组件偏移。

修复代码 #

直接在animate中添加x: 0，明确指定x轴的最终位置：

import { motion } from "framer-motion";
function FirstPage() {
  return (
    <motion.h1
      initial={{ opacity: 0, scale: 0.5, y: -100, x: -100 }}
      animate={{ opacity: 1, scale: 1, x: 0 }} // 新增x:0，确保动画结束后x轴归位
      transition={{
        duration: 0.8,
        delay: 0.5,
        ease: [0, 0.71, 0.2, 1.01],
      }}
    >
      Tehauto
    </motion.h1>
  );
}

额外校验（可选） #

如果问题仍存在，可通过Bootstrap类强制锁定h1的居中布局，避免全局样式干扰：

<motion.h1
  className="text-center m-0" // 用Bootstrap类强制水平居中并清除默认margin
  initial={{ opacity: 0, scale: 0.5, y: -100, x: -100 }}
  animate={{ opacity: 1, scale: 1, x: 0 }}
  transition={{
    duration: 0.8,
    delay: 0.5,
    ease: [0, 0.71, 0.2, 1.01],
  }}
>
  Tehauto
</motion.h1>

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