Framer-motion does not stagger children, no matter what I try

My JSX:

 <motion.div className={styles.aboutGreeting}
                    variants={containerVariants}
                    initial='hidden'
                    animate='visible'
                    >
                    <motion.h4 className={styles.firstLine}
                        variants={dropUpVariants}
                    >
                        Hi, I&apos;m
                    </motion.h4>
                    <motion.h1 className={styles.highlight}
                        variants={dropUpVariants}
                    >
                        John Doe
                    </motion.h1>
                    <motion.h1 className={styles.title}
                        variants={dropUpVariants}
                    >
                        I&apos;m a front-end web developer.
                    </motion.h1>
                </motion.div>

My variants:

export const containerVariants = {
    hidden: {
        opacity: .6
    },
    visible: {
        opacity: 1,
        transition: {
            staggerChildren: 0.5
        }
    }

}
export const dropUpVariants = {
    hidden: {
        y: '100vw'
    },
    visible: {
        y: 0,
        transition: {
            type: 'spring', stiffness: 100, mass: .3,
            delay: .3
        }
    }
}

As the title suggests, the animations do play, but there is no stagger effect. The three children of aboutGreeting all play their animation at once. Of course I can set a manual delay, but I'd like the "staggerChildren" property to work, to be honest. Any idea how I could fix this?

With Framer/Framer Motion, when you are using staggerChildren in a parent variant and the delay property on children variants, the delay property will take precedence, starting all child animations at once.

For this to work you will need to remove the delay: .3 property on dropUpVariants.

Here's a working codesandbox: https://codesandbox.io/s/stackoverflow-framer-motion-does-not-stagger-children-no-matter-what-i-try-vnuuc4

export const containerVariants = {
  hidden: {
    opacity: 0
  },
  visible: {
    opacity: 1,
    transition: {
      delayChildren: 0, // this will set a delay before the children start animating
      staggerChildren: 0.3 // this will set the time inbetween children animation
    }
  }
};
export const dropUpVariants = {
  hidden: {
    y: "100vw"
  },
  visible: {
    y: 0,
    transition: {
      type: "spring",
      stiffness: 100,
      mass: 0.3
      // remove delay: 0.3,
    }
  }
};