index.html

<html>
<body style="font-family:georgia">
<script src="accelimation.js"></script>
<script>
window.onclick = function() {
  var w = document.body.clientWidth - 35;
  var h = document.body.clientHeight - 35;
  var x = Math.random() * w;
  var y = Math.random() * h;
  var t = Math.random() * 2000 + 500;
  var accel = Math.random() * 2;

  var foo = document.getElementById("foo");
  var a = new Accelimation(foo.style, "left", x, t, accel, "px");
  var b = new Accelimation(foo.style, "top", y, t, accel, "px");
  a.start();
  b.start();
}
</script>

<div style="font-family:georgia; width:60ex;">
<p><b>Accelimation</b>

<p>Animates any numeric JavaScript property (with optional string suffix) with
configurable acceleration.

<p>The <a
href="https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame"
>requestAnimationFrame</a> function is used when available for
optimal performance. Otherwise, a single timer loop is shared between all
concurrent animations.

<p><a href="https://github.com/aboodman/accelimation">source code</a>
</div>

<div style="text-align:center; margin-top:6em;"><b>Click anywhere to test.</b></div>

<div id="foo" style="position:absolute; left:200px; top:200px; width:35px; height:35px; background:#666; border:1px solid black; opacity:0.4;"></div>

</html>