Getting Started

Creating a tween

This simplest way create a tween is to use shifty.tween:

import { tween } from 'shifty'

tween({
  from: { x: 0, y: 50 },
  to: { x: 10, y: -30 },
  duration: 1500,
  easing: 'easeOutQuad',
  render: state => console.log(state),
}).then(() => console.log('All done!'))

You can also instantiate a shifty.Tweenable to reuse tweens and have more control over the animation:

import { Tweenable } from 'shifty'

const tweenable = new Tweenable()

tweenable.setConfig({
  from: { x: 0, y: 50 },
  to: { x: 10, y: -30 },
  duration: 1500,
  easing: 'easeOutQuad',
  render: state => console.log(state),
})

// tweenable.tween() could be called again later
tweenable.tween().then(() => console.log('All done!'))

See the Pen Shifty - Playground by Jeremy Kahn (@jeremyckahn) on CodePen.