tweeny.js

Tweeny.js

A lightweight ( 5kb minified ), bare bones, javascript animation engine with some handy easing functions.

Usage:

const tween = Tweeny.to({ foo: 24, bar: 50 }, 1000, {
  foo: 42,
  bar: 100,
  onUpdate: (obj) => console.log(obj.foo, obj.bar),
  onComplete: (obj) => console.log('Done!', obj),
  ease: Tweeny.ease.inOutElastic
})

// tween.pause()
// tween.play()
// tween.restart()
// tween.loop()
// tween.kill()

Controls

Each created tween has a set of controls available:

Method	Description
pause()	pause playing animation
play()	play paused animation
restart()	restart playing or paused animation
loop()	loop animation until killed
kill()	kill animation

Easing

Some helpful easing functions from https://gist.github.com/gre/1650294

Accessible through Tweeny.ease

Ease	Description
linear	no easing, no acceleration
inQuad	accelerating from zero velocity
outQuad	decelerating to zero velocity
inOutQuad	acceleration until halfway, then deceleration
inCubic	accelerating from zero velocity
outCubic	decelerating to zero velocity
inOutCubic	acceleration until halfway, then deceleration
inQuart	accelerating from zero velocity
outQuart	decelerating to zero velocity
inOutQuart	acceleration until halfway, then deceleration
inQuint	accelerating from zero velocity
outQuint	decelerating to zero velocity
inOutQuint	acceleration until halfway, then deceleration
inElastic	elastic bounce effect at the beginning
outElastic	elastic bounce effect at the end
inOutElastic	elastic bounce effect at the beginning and end
inSin	accelerating from zero velocity
outSin	accelerating to zero velocity
inOutSin	acceleration until halfway, then deceleration