timeline-sketch.js

function createToken() {
	let resolve
	const promise = new Promise(r => {resolve = r})
	return [promise, resolve]
}

const c = function() {
    const timeline = Timeline(async (delay) => {
        const state = stmu({
            state1: true,
            state2: false,
            state3: false
        }, () => {m.redraw()})

        const timeline = Timeline(async (delay) => {
            const[promise1, resolve1] = createToken()
            const[promise2, resolve2] = createToken()
            const[promise3, resolve3] = createToken()

            state({state1: false, state2: true})
            await resolve1

            await delay(1000)

            state({state2: false, state3: true})
            await resolve2

            await delay(2000)

            state({state3: false})
            await resolve3
            // ...
        })
    }

    function onremove() {
        timeline.cancel()
    }

    function view() {
        const s = state()
        return m('.container',
            s.state1 && m('.comp1', {resolve1})
            s.state2 && m('.comp2', {resolve2})
            s.state3 && m('.comp3', {resolve3})
        )
    }

    return {onremove, view}
}