Tween Promise canceling

[jeremyckahn]

Currently, tween Promises never reject. There needs to be a cancel() method to support this sort of use case:

const { Tweenable } = shifty

const tweenable = new Tweenable()

;(async () => {
  const element = document.querySelector('#tweenable')

  while (true) {
    try {
      await tweenable.tween({
        render: ({ x }) => {
          element.style.transform = `translateX(${x}px)`
        },
        easing: 'easeInOutQuad',
        duration: 400,
        from: { x: 0 },
        to: { x: 200 },
      })

      await tweenable.tween({
        to: { x: 0 },
      })

      await tweenable.tween({
        to: { x: 200 },
      })

      await tweenable.tween({
        to: { x: 0 },
      })
    } catch (e) {
      // Bail out of the infinite loop
      break
    }
  }
})()

document.querySelector('#cancel').addEventListener('click', () => {
  tweenable.cancel()
})