8. Event: Sequence
With the useAnimation()
hook you can start and stop animations. Combined with async
and await
, this enables you to create a sequence of animations.
Code component
export function CC08EventSequence() {
const animation = useAnimation()
async function sequence() {
await animation.start({ rotate: -90 })
await animation.start({ scale: 1.5 })
await animation.start({ rotate: 0 })
await animation.start({ scale: 1 })
}
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Animation
animate={animation}
onTap={sequence}
/>
)
}
Framer Motion
export function FM08EventSequence() {
const animation = useAnimation()
async function sequence() {
await animation.start({ rotate: -90 })
await animation.start({ scale: 1.5 })
await animation.start({ rotate: 0 })
await animation.start({ scale: 1 })
}
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "pointer",
}}
onTap={sequence}
animate={animation}
/>
</Center>
)
}
Override
export function Event_Sequence(): Override {
const animation = useAnimation()
async function sequence() {
await animation.start({ rotate: -90 })
await animation.start({ scale: 1.5 })
await animation.start({ rotate: 0 })
await animation.start({ scale: 1 })
}
return {
animate: animation,
onTap() {
sequence()
},
}
}