My JSX:
<motion.div className={styles.aboutGreeting}
variants={containerVariants}
initial='hidden'
animate='visible'
>
<motion.h4 className={styles.firstLine}
variants={dropUpVariants}
>
Hi, I'm
</motion.h4>
<motion.h1 className={styles.highlight}
variants={dropUpVariants}
>
John Doe
</motion.h1>
<motion.h1 className={styles.title}
variants={dropUpVariants}
>
I'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 thedelay
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