Some Examples » 21. Keyframes: Position and color

21. Keyframes: Position and color

In this example, rotate has a conventional animation, but xy, and backgroundColor have keyframe animations.

Code component

In the same duration of 4 seconds:

  • the x and y properties animate through a sequence of four positions;
  • the backgroundColor changes to “#60f” and then back to “#fd3”;
  • and the frame does a (counterclockwise) 360.

These keyframe sequences can be as long as you want, and they don’t have to be the same length for all properties (the sequence for backgroundColor is shorter than those for x and y).

export default function CC_21_Keyframes_Position_and_color(props) {
    return (
        <div style={{ width: 400, height: 400, ...props.style }}>
            <motion.div
                style={{
                    width: 120,
                    height: 120,
                    borderRadius: 25,
                    backgroundColor: "#fd3",
                    position: "absolute",
                    left: 40,
                    top: 40,
                }}
                animate={{
                    x: [0, 200, 200, 0, 0],
                    y: [0, 0, 200, 200, 0],
                    rotate: -360,
                    backgroundColor: ["#fd3", "#60f", "#fd3"],
                }}
                transition={{ duration: 4, ease: "linear" }}
            />
        </div>
    )
}

Code override

export function Keyframes_Position_and_color(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{
                    x: [0, 200, 200, 0, 0],
                    y: [0, 0, 200, 200, 0],
                    rotateZ: -360,
                    backgroundColor: ["#fd3", "#60f", "#fd3"],
                }}
                transition={{ duration: 4, ease: "linear" }}
            />
        )
    }
}

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