<h4>move the mouse</h4>
<div id="circle"></div>

#circle{
  width:100px;
  height:100px;
  background:#00cf8a;
  position:absolute;
  border-radius:50%;
}

h4{
  position:absolute;
  bottom:20px;
  right:20px;
}

var mouseX=window.innerWidth/2, mouseY=window.innerHeight/2;

var circle = {
  el:$('#circle'),
  x:window.innerWidth/2, y:window.innerHeight/2, w:100, h:100,
  update:function(){
    l = this.x-this.w/2;
    t = this.y-this.h/2;
    this.el.css({
      'transform':'translate3d('+l+'px, '+t+'px, 0)'
    });
  }
}

$(window).mousemove (function(e){
  mouseX = e.clientX;
  mouseY = e.clientY;
})

setInterval (move,1000/60)

function move(){
  //circle.x += (mouseX - circle.x) * 0.1; // old style
  //circle.y += (mouseY - circle.y) * 0.1; // old style
  
  circle.x = lerp (circle.x, mouseX, 0.1);
  circle.y = lerp (circle.y, mouseY, 0.1);
  circle.update() 
}

function lerp (start, end, amt){
  return (1-amt)*start+amt*end
}