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",
}
}