0.1.0 • Published 7 years ago

tweeny.js v0.1.0

Weekly downloads
7
License
SEE LICENSE IN LI...
Repository
github
Last release
7 years ago

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:

MethodDescription
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

EaseDescription
linearno easing, no acceleration
inQuadaccelerating from zero velocity
outQuaddecelerating to zero velocity
inOutQuadacceleration until halfway, then deceleration
inCubicaccelerating from zero velocity
outCubicdecelerating to zero velocity
inOutCubicacceleration until halfway, then deceleration
inQuartaccelerating from zero velocity
outQuartdecelerating to zero velocity
inOutQuartacceleration until halfway, then deceleration
inQuintaccelerating from zero velocity
outQuintdecelerating to zero velocity
inOutQuintacceleration until halfway, then deceleration
inElasticelastic bounce effect at the beginning
outElasticelastic bounce effect at the end
inOutElasticelastic bounce effect at the beginning and end
inSinaccelerating from zero velocity
outSinaccelerating to zero velocity
inOutSinacceleration until halfway, then deceleration