[velocity] dragging animation

card.css

body { background-color:#20262E; }

#card {
  position: absolute;
  width: 250px;
  height: 50px;
  background: grey;
  border-radius: 6px;
  cursor: move;
}

card.html

<!-- SOURCE : https://uxdesign.cc/how-to-fix-dragging-animation-in-ui-with-simple-math-4bbc10deccf7 -->

<div id="card"></div> 

<!-- temporary -->
<h3> 1.3m/s </h3>

velocity.js

/******************************************************************************************************
---  SOURCE : https://uxdesign.cc/how-to-fix-dragging-animation-in-ui-with-simple-math-4bbc10deccf7 ---
******************************************************************************************************/


// Temporary, for showing velocity at the top left.
var xVelocityDisplay = document.querySelector('h3');
var updateVelocityDisplay = function(velocity) {
  xVelocityDisplay.innerHTML = 'x velocity = ' + velocity + ' pixels/60frames';
};

var card = document.querySelector('#card');

// Stores X and Y coordinates of Mouse
var MousePosition = {
  x: 0,
  y: 0
};

// Stores X and Y Coordinates of the Card
var CardPosition = {
  x: 0,
  y: 0
};


var xVelocity = 0;

// Temporary, for updating velocity at the top left.
setInterval(function() {
  updateVelocityDisplay(xVelocity);
}, 100);

var update = function() {
  xVelocity = (MousePosition.x - CardPosition.x);
  
  CardPosition.x = MousePosition.x;
  CardPosition.y = MousePosition.y;
  // Update the position of card
  card.style.top = CardPosition.y + 'px';
  // Subtract (Width of card / 2 = 125) to centre cursor on top
  card.style.left = (CardPosition.x - 125) + 'px';
  
  requestAnimationFrame(update); 
};

update();


document.addEventListener('mousemove', function(e) {
  MousePosition.x = e.clientX;
  MousePosition.y = e.clientY;
});