10. Animation sequence
With the useAnimation()
hook, you can start and stop animations. Combined with async
and await
, it lets you create a sequence of animations.
Code component
export default function CC_10_Animation_sequence(props) {
const animation = useAnimation()
async function sequence() {
await animation.start({ rotate: -90 })
await animation.start({ scale: 1.5 })
await animation.start({ rotate: 0 })
animation.start({ scale: 1 })
}
return (
<div>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "pointer",
}}
onTap={sequence}
animate={animation}
/>
</div>
)
}
Code override
export function Animation_sequence(Component): ComponentType {
return (props) => {
const animation = useAnimation()
async function sequence() {
await animation.start({ rotate: -90 })
await animation.start({ scale: 1.5 })
await animation.start({ rotate: 0 })
animation.start({ scale: 1 })
}
return <Component {...props} animate={animation} onTap={sequence} />
}
}