26. Variants

Here’s a simple example of an animation between two variants triggered by a whileHover.

With initial, you can define how the frame should look when it first appears.

Code component

export function CC26Variants() {
    const variants = {
        variantA: { scale: 1, rotate: 90 },
        variantB: { scale: 1.25, rotate: 0 },
    }

    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            variants={variants}
            initial="variantA"
            whileHover="variantB"
        />
    )
}

Framer Motion

export function FM26Variants() {
    const variants = {
        variantA: { scale: 1, rotate: 90 },
        variantB: { scale: 1.25, rotate: 0 },
    }

    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                }}
                variants={variants}
                initial="variantA"
                whileHover="variantB"
            />
        </Center>
    )
}

Override

export function Variants(): Override {
    const variants = {
        variantA: { scale: 1, rotate: 90 },
        variantB: { scale: 1.25, rotate: 0 },
    }

    return {
        variants: variants,
        initial: "variantA",
        whileHover: "variantB",
    }
}