Some Examples » 27. Variants: Animation propagation
27. Variants: Animation propagation
A child element doesn’t need any animate, whileHover, etc., to animate simultaneously with its parent. It just needs to have a set of variants with the same names.
Code component
export default function CC_27_Variants_Animation_propagation(props) {
const parent = {
variantA: { scale: 1 },
variantB: { scale: 1.25 },
}
const child = {
variantA: { bottom: 0, right: 0, rotate: 0 },
variantB: { top: 0, left: 0, rotate: 180 },
}
return (
<div>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "rgba(255,255,255,0.5)",
position: "relative",
}}
variants={parent}
initial="variantA"
whileHover="variantB"
>
<motion.div
style={{
width: 85,
height: 85,
borderRadius: "20px 20px 30px 20px",
backgroundColor: "#fff",
position: "absolute",
bottom: 0,
right: 0,
}}
variants={child}
transition={{
type: "spring",
damping: 10,
mass: 0.2,
stiffness: 150,
}}
/>
</motion.div>
</div>
)
}
Code overrides
export function Parent(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
variants={{ variantA: { scale: 1 }, variantB: { scale: 1.25 } }}
initial="variantA"
whileHover="variantB"
/>
)
}
}
export function Child(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
variants={{
variantA: { bottom: 0, right: 0, rotate: 0 },
variantB: { top: 0, left: 0, rotate: 180 },
}}
transition={{
type: "spring",
damping: 10,
mass: 0.2,
stiffness: 150,
}}
/>
)
}
}