10. Animation sequence

With the useAnimate() hook, you can start and stop animations manually, and it also lets you create a sequence of animations.

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 function Example() {
    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
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
                cursor: "pointer"
            }}
            ref={scope}
            onClick={sequence}
        />
    );
}