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: