Skip to content

Add .cancel() and .data() methods

Choose a tag to compare

@jeremyckahn jeremyckahn released this 19 Aug 17:59

Adds cancel and data methods.

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)`
        },
        data: { hello: 'world' },
        easing: 'easeInOutQuad',
        duration: 400,
        from: { x: 0 },
        to: { x: 200 },
      })

      await tweenable.tween({
        to: { x: 0 },
      })
    } catch (e) {
      console.log(e.tweenable.data())
      break
    }
  }
})()

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

See: