title: How to add smooth transitions to mouse X and Y coordinates with JS?
body: <p>I created a function that let a DOM element follow the mouse cursor. 
  <a href="http://codepen.io/anon/pen/AXdxZO?editors=0110" rel="nofollow">http://codepen.io/anon/pen/AXdxZO?editors=0110</a></p>
  
  <p>When you hover over each item, the pointer will follow your mouse movements. Now I'm searching for some nice animation that can be added to this code. I was thinking about a little delay with ease transition. I already tried to use <code>transition: all 0.1s ease;</code> but this works a little buggy and not "smooth" enough. I know there is also something called <code>cubic</code>, but I don't know if that's what I needed. </p>
  
  <p>I think there should be a function that will ease the mouse X and Y coordinates with a little smooth delay added to it.</p>
  
  <p><strong>The part that delegate the mouse movement is:</strong></p>
  
  <pre><code>function mouseMove(event) {
    var target = $(this);
    var dot = target.find('.pointer');
  
    var height = dot.height();
    var width = dot.width();
  
    var offset = target.offset();
    var w = target.width();
    var h = target.height();
    var top = offset.top;
    var left = offset.left;
    console.log(left);
  
    var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
    var mY = (event.clientY - top) - height / 2;
  
    $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px , ' + mY + 'px, 0) scale(1, 1)');
  
  };
  </code></pre>
  
  <p><strong>Pointer CSS:</strong></p>
  
  <pre><code>.pointer {  
    position: absolute;
    z-index: 1;
    width: 25%;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
        transform: translateZ(0) scale(0);
        -webkit-transform: translateZ(0) scale(0);
  }
  
  .pointer:before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  </code></pre>
  
  <p>Does anyone have some advice, recourses or maybe code parts that I should needed.</p>
  
  <p>Another think that I want to animate smoothly is the <code>scale</code> property of the <code>pointer</code> class. When the mouse is enter the thumbnail it should scale to 1, if leaves the area, it should scale back to zero.</p>
  
  <p>Looking forward to your responses. Thank you in advance.</p>