9. Cycling through states

Here, an onTap() event and Framer Motion’s useCycle() hook are used to cycle between two visual states.

export function Example() {
    const [animate, cycle] = useCycle(
        { scale: 1, rotate: 0 },
        { scale: 1.25, rotate: 90 }
    );

    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
                cursor: "pointer"
            }}
            animate={animate}
            onTap={cycle}
        />
    );
}