tween.jsでキャンセルできる直列なアニメーションを実装する

const TWEEN = require('tween.js')

const [tween] = [...document.querySelectorAll('.animate')]
  .map(el => {
    const state = {x: 0}
    return new TWEEN.Tween(state)
      .to({x: 300})
      .onUpdate(() => {
        el.style.transform = `translate(${state.x}px, 0)`
      })
  })
  .map((currentTween, i, tweens) => {
    const nextTween = tweens[i + 1]
    if (nextTween) currentTween.chain(nextTween)
    return currentTween
  })

tween.start()
document.querySelector('.stop').onclick = () => tween.stop()

requestAnimationFrame(function animate(time) {
  requestAnimationFrame(animate)
  TWEEN.update(time)
})

気の利かないライブラリだとsindresorhus/p-cancelableとかでcancelableなPromisesにする感じなのかなと思うけど、tween.jsは丁度いいAPIなので楽にできた。