Framer Motion文字揭露动画无法实现字符stagger效果求助

你遇到的两个问题根源很明确，直接看代码里的两处错误：

问题1：所有字符同步动画，无stagger效果 #

你的子元素<motion.span>自己设置了initial="hidden"和animate="visible"，这会让每个字符独立触发动画，完全忽略父容器的staggerChildren配置。父容器的 stagger 逻辑需要子元素继承父级的动画状态，而不是自己定义动画触发条件。

问题2：y轴动画失效，仅透明度生效 #

你在textVariant里把y轴偏移值写成了字符串"80"，Framer Motion的数值属性（比如y、x、scale）需要传入数字类型，字符串无法被正确解析，导致y轴动画直接失效，只有透明度动画能正常运行。

修正后的代码 #

"use client";
import { Variants, motion } from "framer-motion";

const MainHeading = () => {
  const textVariant: Variants = {
    hidden: {
      opacity: 0,
      y: 80, // 把字符串改为数字
    },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        ease: "easeInOut",
      },
    },
  };

  const textContainerVariant: Variants = {
    hidden: { opacity: 0 }, // 父容器不需要y轴偏移，子元素已经有了
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1, // 可根据需求调整间隔，0.5偏长
        delayChildren: 0.5,
      },
    },
  };

  const headingLine = "Full Stack Web Dev";

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={textContainerVariant}
      className="text-8xl lg:text-9xl"
    >
      {headingLine.split("").map((char, index) => {
        return (
          <motion.span
            key={`${char}-${index}`}
            variants={textVariant}
            className="inline-block"
          >
            {char}
          </motion.span>
        );
      })}
    </motion.div>
  );
};

export { MainHeading };

关键改动说明 #

• 移除子元素的initial和animate属性，让父容器统一控制动画触发，这样staggerChildren就能按顺序逐个激活子元素动画。
• 将y轴偏移值从字符串"80"改为数字80，确保Framer Motion能正确解析并执行y轴动画。
• 父容器的hidden状态移除y轴偏移，避免和子元素动画冲突。

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