Some Examples » 10. Animation sequence

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

10. Animation sequence

Code component

Code override

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

Leave a Reply Cancel reply