21. Color: Arrays
Good to know: You can animate to keyframes, to an array of values (here, three colors), and they will be spread out over the total duration (here, two seconds).
Code component
export function CC21ColorArrays() {
return (
<Frame
// Visual & layout
size="100%"
background="#60F"
// Animation
animate={{ backgroundColor: ["#60F", "#09F", "#FA0"] }}
transition={{ duration: 2, yoyo: Infinity }}
>
<Frame
// Visual & layout
size={150}
borderRadius={30}
backgroundColor="#fff"
center
// Animation
animate={{ rotate: [0, 180] }}
transition={{ duration: 2, yoyo: Infinity }}
/>
</Frame>
)
}
Framer Motion
export function FM21ColorArrays() {
return (
<motion.div
style={{
width: "100%",
height: "100%",
backgroundColor: "#60F",
display: "flex",
placeItems: "center",
placeContent: "center",
}}
animate={{ backgroundColor: ["#60F", "#09F", "#FA0"] }}
transition={{ duration: 2, yoyo: Infinity }}
>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
animate={{ rotate: [0, 180] }}
transition={{ duration: 2, yoyo: Infinity }}
/>
</motion.div>
)
}
Overrides
export function Background(): Override {
return {
animate: { backgroundColor: ["#60F", "#09F", "#FA0"] },
transition: { duration: 2, yoyo: Infinity },
}
}
export function Color_Arrays(): Override {
return {
animate: { rotate: [0, 180] },
transition: { duration: 2, yoyo: Infinity },
}
}