How to use delay with staggerChildren in Framer Motion

Question

I want to use staggerChildren in my Next.js app with Framer Motion, and it works fine. But when I add delay to the variants, they all appear at once, after the delay.

I tried adding both to the variants but it's not working. I also tried delayChildren: 1, and staggerChildren: 1.25 but they're not working as well.

const TEXT_VARIANTS = {
  initial: {
    opacity: 0,
  },
  enter: {
    opacity: 1,
    transition: {
      duration: 0.25,
      delay: 1,
      staggerChildren: 0.25,
    },
  },
}

<motion.h1 initial="initial" animate="enter" variants={TEXT_VARIANTS}>
            <motion.span variants={TEXT_VARIANTS}>John</motion.span>{" "}
            <motion.span variants={TEXT_VARIANTS} className="circle">
              Doe
            </motion.span>{" "}
            <motion.span variants={TEXT_VARIANTS}>John</motion.span>
          </motion.h1>

Answer 1

Replace delay with delayChildren. You can additionally create variants for an individual item. Here's a code-sandbox with working code: https://codesandbox.io/p/sandbox/jovial-dewdney-dq33km