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