Animation » Example Animations » 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} />
    }
}


Join the Framer book mailing list    ( ± 6 emails/year )

GDPR

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 a Reply