Add .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: