27. Variants: Animation propagation

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>
    )
}

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,
                }}
            />
        )
    }
}