tween-component

Motion tween engine using 'ease'

tween

Motion tween component using ease.

$ component install component/tween
var Tween = require('tween');
var raf = require('raf');
var button = document.querySelector('button');
 
var tween = Tween({ rotate: 0, opacity: 0 })
  .ease('out-bounce')
  .to({ rotate: 360, opacity: 1  })
  .duration(800);
 
tween.update(function(o){
  button.style.opacity = o.opacity;
  button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
});
 
tween.on('end', function(){
  animate = function(){};
});
 
function animate() {
  raf(animate);
  tween.update();
}
 
animate();

Initialize a new Tween with obj.

Reset the tween.

Tween to obj and reset internal state.

 tween.to({ x: 50, y: 100 })

Set duration to ms [500].

Set easing function to fn.

 tween.ease('in-out-sine')

Set update function to fn or when no argument is given this performs a "step".

MIT