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} />
    }
}

Join the Mighty Guides mailing list    ( ± 6 emails/year )

Click the checkbox to allow us to send you emails.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.

Leave this field empty if you're human: