7. Event: Tap
Here, an onTap()
event and Framer’s useCycle()
hook are used to cycle between two visual states.
Code component
export function CC07EventTap() {
const [animate, cycle] = useCycle(
{ scale: 1, rotate: 0 },
{ scale: 1.25, rotate: 90 }
)
return (
<Frame
// Visual & layout
size={150}
borderRadius={30}
backgroundColor="#fff"
center
// Animation
animate={animate}
onTap={() => cycle()}
/>
)
}
Framer Motion
export function FM07EventTap() {
const [animate, cycle] = useCycle(
{ scale: 1, rotate: 0 },
{ scale: 1.25, rotate: 90 }
)
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "pointer",
}}
animate={animate}
onTap={() => cycle()}
/>
</Center>
)
}
Override
export function Event_Tap(): Override {
const [animate, cycle] = useCycle(
{ scale: 1, rotate: 0 },
{ scale: 1.25, rotate: 90 }
)
return {
animate: animate,
onTap() {
cycle()
},
}
}
2 comments on “7. Event: Tap”
Leave a Reply
You must be logged in to post a comment.
How can I change the text inside a frame using cycle? Like “show” “close”?
Like this:
Or with an Override on a Design Component:
Keep in mind that the name of the text block (which you made a property) should in this case be
text
.