component-tween/examples/dom.html

Motion tween engine using 'ease'

<style>
  body {
    padding: 50px;
  }

  button {
    padding: 15px 25px;
  }
</style>

<button>Button</button>

<script src="../build/build.js"></script>

<script>
  var Tween = require('tween');
  var raf = require('component-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();
</script>