I created component with documentation, but it doesn't work, help to resolve it. I need to animate children in queue by increasing delay

const Intro = () => {
    const navAnimation = {
        hidden: {
            y: -500,
            opacity: 0
        },
        visible: (custom: number) => ({
            y: 0,
            opacity: 1,
            transition: {delay: custom * 0.2}
        }),
    }
return (
<div> 
    <motion.div initial={'hidden'} whileInView={'visible'}> 
        <motion.div custom={1} variants={navAnimation}>
            <p>text</p>
        </motion.div>
    <motion.div custom={2} variants={navAnimation}>
            <p>text</p>
        </motion.div>
    </motion.div>
</div>

CodePudding user response：

I think the problem is from having 2 motion.div element you problem is because navAnimation is not applied to parent element if you simply add variants={navAnimation} to parent element, your problem will be solved

<motion.div initial='hidden' variants={navAnimation} whileInView='visible'> 
        <p>text</p>
</motion.div>

for animating children in queue you can handle it in this way :

       <div>
            <motion.div initial='hidden' transition={{ delay: 1 * 0.2 }} whileInView='visible' variants={navAnimation}>
              <p>text</p>
            </motion.div>
            <motion.div initial='hidden' transition={{ delay: 2 * 0.2 }} whileInView='visible'  variants={navAnimation}>
              <p>text</p>
            </motion.div>
        </div>