Child animation clashing with parent animation

[julianberr]

Hello everyone,

when I am trying to have a parent element stagger its children and then also apply an animation trigger on the children of said parent element, the parent animation gets canceled.

My code looks something like this:

<motion.div
  whileInView={"animate"}
  variants={{
      animate: {
        transition: {staggerChildren: 0.5},
      },
  }}
> 
     <motion.div 
        variants={{
            animate: {
                 opacity: 1
            }
         }}
        whileHover={"hover"}
    >
    // Do something while hovering
    </motion.div>
</motion.div>

So basically the staggering animation works but as soon as the whileHover is added on the second div the staggering animation stops working and only the child hover animation works. Does anyone know why this happens?