Framer Motion - 分割文本动画顺风渐变颜色

Answer 1

正如您所注意到的，

text

已被分割成单个

letter

，这就是为什么对每个

letter

应用了渐变效果。

所以，只需尝试从

text

方法中解开

text.split("").map((letter, index) =>

即可。

<div className="space-y-3">
  <div>
    <H1 className="text-nowrap text-center md:text-start">
      <motion.span
        className="bg-gradient-to-r from-red-600 to-yellow-300 bg-clip-text text-transparent"
        key={index}
        initial={{ opacity: 1 }}
        animate={{ opacity: 0 }}
        transition={{
          duration: 3,
          repeat: Infinity,
          delay: index * 0.1,
        }}
      >
        {text}
      </motion.span>
      👋
    </H1>
  </div>
</div>