Comment by geenat

Mostly obsolete with CSS tweening.

You can do non-blocking animation timelines without any library if you use async javascript.

  <html>
  <body>
  <div>Click me to change color every second, then remove.
    <script>
      // Locality of Behavior
      me = document.currentScript.parentElement;
      me.addEventListener("click", async event => {
        me = event.target
        me.style.transition = "background 1s"
        await sleep(1000)
        me.style.background = "red"
        await sleep(1000)
        me.style.background = "green"
        await sleep(1000)
        me.style.background = "blue"
        await sleep(1000)
        me.style.background = "none"
        await sleep(1000)
        me.remove()
      })

      const sleep = ms => new Promise(r => setTimeout(r, ms));
    </script>
  </div>
  </body>
  </html>

If you like this, you may also want to check out: https://github.com/gnat/surreal