Improved async/await support and property names
Shifty 2.11.0 improves support for async/await. Now code like this can be written:
import { tween } from 'shifty'
const animate = async () => {
const element = document.querySelector('#tweenable')
const { tweenable } = await tween({
render: ({ scale, x }) => {
element.style.transform = `translateX(${x}px) scale(${scale})`
},
easing: 'easeInOutQuad',
duration: 500,
from: { scale: 1, x: 0 },
to: { x: 200 },
})
await tweenable.tween({
to: { x: 0 },
})
await tweenable.tween({
to: { scale: 3 },
})
}This release also changes how tweens resolve, implicitly reuses config across tweens, renames step to render and attachment to data (with legacy property names supported).
See: