Skip to content

Improved async/await support and property names

Compare
Choose a tag to compare
@jeremyckahn jeremyckahn released this 16 Aug 23:15

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: