8. Event: Sequence

With the useAnimation() hook you can start and stop animations. Combined with async and await, this enables you to create a sequence of animations.

Code component

export function CC08EventSequence() {
    const animation = useAnimation()

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

    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            animate={animation}
            onTap={sequence}
        />
    )
}

Framer Motion

export function FM08EventSequence() {
    const animation = useAnimation()

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

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

Override

export function Event_Sequence(): Override {
    const animation = useAnimation()

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

    return {
        animate: animation,
        onTap() {
            sequence()
        },
    }
}