10. Animation sequence
With the useAnimate() hook, you can start and stop animations manually, and it also lets you create a sequence of animations.
Code component
Notice that we’re animating a common <div> here. This is because you don’t need to use Motion elements for useAnimate(); it works with any HTML or SVG element.
export default function CC_10_Animation_sequence(props) {
const [scope, animate] = useAnimate()
function sequence() {
animate([
[scope.current, { rotate: -90 }],
[scope.current, { scale: 1.5 }],
[scope.current, { rotate: 0 }],
[scope.current, { scale: 1 }],
])
}
return (
<div>
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "pointer",
}}
ref={scope}
onClick={sequence}
/>
</div>
)
}Code override
export function Animation_sequence(Component): ComponentType {
return (props) => {
const [scope, animate] = useAnimate()
function sequence() {
animate([
[scope.current, { rotate: -90 }],
[scope.current, { scale: 1.5 }],
[scope.current, { rotate: 0 }],
[scope.current, { scale: 1 }],
])
}
return <Component {...props} ref={scope} onTap={sequence} />
}
}