score:10

Accepted answer

documentation propagation section (https://www.framer.com/api/motion/animation/#propagation) says that

if a motion component has children, changes in variant will flow down through the component hierarchy. these changes in variant will flow down until a child component defines its own animate property.

you have to remove the animate prop from img elements.

https://codesandbox.io/s/gallant-goldwasser-dwiz2

score:4

if you set an animation on your child, your parent won't pass it's animation logic to it. thus you have to remove the initial and animate property from you <img> component:

<img
   src="https://picsum.photos/200/200"
   variants={imgvariants}
/>

you can look at this example from the official docs for a reference: https://www.framer.com/api/motion/types/#orchestration.when


Related Query

More Query from same tag