10. Animation sequence

With the useAnimationControls() hook, you can start and stop animations. Combined with async and await, it lets you create a sequence of animations.

Code component

export default function CC_10_Animation_sequence(props) {
    const animation = useAnimationControls()

    async function sequence() {
        await animation.start({ rotate: -90 })
        await animation.start({ scale: 1.5 })
        await animation.start({ rotate: 0 })
        animation.start({ scale: 1 })
    }

    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "pointer",
                }}
                onTap={sequence}
                animate={animation}
            />
        </div>
    )
}

Code override

export function Animation_sequence(Component): ComponentType {
    return (props) => {
        const animation = useAnimationControls()

        async function sequence() {
            await animation.start({ rotate: -90 })
            await animation.start({ scale: 1.5 })
            await animation.start({ rotate: 0 })
            animation.start({ scale: 1 })
        }

        return <Component {...props} animate={animation} onTap={sequence} />
    }
}