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