InTween

Your companion for building rich interactive media with Interactive Tweens.

Guide — Demos — API Docs

Quick Start

yarn add intween
# -- or --
npm install -s intween

import { Tween, Meddle, Player, spreadAssign, animationThrottle } from 'intween'

Or use a CDN

<script src="https://unpkg.com/intween/dist/intween.min.js"></script>
<script>
const { Tween, Meddle, Player, spreadAssign, animationThrottle } = InTween // window.InTween
</script>

Now play!

const tween = new Tween({
  position: [0, 0]
})

tween.to({
  position: [1, 1]
}, {
  startTime: '1s',
  endTime: '2s',
  easing: 'quadInOut'
})

const meddle = new Meddle(tween).easing('backIn')

// connect it to some interaction event
window.addEventListener('click', e => {
  const position = [e.clientX, e.clientY]
  meddle.set({ position })
})

const player = new Player(tween.duration)

player.pipe(
  spreadAssign(
    tween,
    meddle
  )
  , animationThrottle()
).subscribe(state => {
  // do stuff with state.position
})

player.play() // go!