5. Event: WhileTap

With whileTap, it’s easy to animate between two states.

Code component

export function CC05EventWhileTap() {
    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            whileTap={{ rotate: 90, scale: 0.75 }}
        />
    )
}

Framer Motion

export function FM05EventWhileTap() {
    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "pointer",
                }}
                whileTap={{ rotate: 90, scale: 0.75 }}
            />
        </Center>
    )
}

Override

export function Event_WhileTap(): Override {
    return {
        whileTap: { rotate: 90, scale: 0.75 },
    }
}