Some Examples » 23. Colors: Keyframe animation

23. Colors: Keyframe animation

A repeating (and reversing) keyframe animation between three colors.

Code component

Note that the middle color is actually… no color, 100% transparent black: "rgba(0,0,0,0)".

export default function CC_23_Colors_Keyframe_animation(props) {
    return (
        <motion.div
            style={{
                width: 400,
                height: 400,
                ...props.style,
                display: "flex",
                placeItems: "center",
                placeContent: "center",
            }}
            animate={{ backgroundColor: ["#0af", "rgba(0,0,0,0)", "#fa0"] }}
            transition={{
                duration: 2,
                repeat: Infinity,
                repeatType: "reverse",
            }}
        >
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                }}
                animate={{ rotate: [0, 180] }}
                transition={{
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse",
                }}
            />
        </motion.div>
    )
}

Code overrides

export function Background(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ backgroundColor: ["#0af", "rgba(0,0,0,0)", "#fa0"] }}
                transition={{
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse",
                }}
            />
        )
    }
}

export function Colors_Keyframe_animation(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: [0, 180] }}
                transition={{
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse",
                }}
            />
        )
    }
}

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply