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

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply