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