How to add smooth animation to Dynamic Mouse Follow?

Question

JavaScript

There is such a code, it animates objects when moving the mouse. But I would like to get smooth animation. How to do?

var stageWidth = $('#Stage').width();
var stageHeight = $('#Stage').height();

sym.onMouseMove = function( pageX, pageY ){

  // Image
var ImageMinPosX = 720;
var ImageMaxPosX = 760;
var ImageMinPosY = 265;
var ImageMaxPosY = 285;


  // move Image
  var ImageRequestPosX = sym.getTranslation(0, stageWidth, ImageMinPosX, ImageMaxPosX, pageX);
  var ImageRequestPosY = sym.getTranslation(0, stageHeight, ImageMinPosY, ImageMaxPosY, pageY);
  sym.$("Image").css({left:ImageRequestPosX, top:ImageRequestPosY});

// Image2
var Image2MinPosX = 440;
var Image2MaxPosX = 420;
var Image2MinPosY = 480;
var Image2MaxPosY = 500;


  // move Image2
  var Image2RequestPosX = sym.getTranslation(0, stageWidth, Image2MinPosX, Image2MaxPosX, pageX);
  var Image2RequestPosY = sym.getTranslation(0, stageHeight, Image2MinPosY, Image2MaxPosY, pageY);
  sym.$("Image2").css({left:Image2RequestPosX, top:Image2RequestPosY});

// Image3
var Image3MinPosX = 50;
var Image3MaxPosX = 70;
var Image3MinPosY = 350;
var Image3MaxPosY = 370;


  // move Image3
  var Image3RequestPosX = sym.getTranslation(0, stageWidth, Image3MinPosX, Image3MaxPosX, pageX);
  var Image3RequestPosY = sym.getTranslation(0, stageHeight, Image3MinPosY, Image3MaxPosY, pageY);
  sym.$("Image3").css({left:Image3RequestPosX, top:Image3RequestPosY});

// Image4
var Image4MinPosX = 0;
var Image4MaxPosX = 20;
var Image4MinPosY = 0;
var Image4MaxPosY = 20;


  // move Image4
  var Image4RequestPosX = sym.getTranslation(0, stageWidth, Image4MinPosX, Image4MaxPosX, pageX);
  var Image4RequestPosY = sym.getTranslation(0, stageHeight, Image4MinPosY, Image4MaxPosY, pageY);
  sym.$("Image4").css({left:Image4RequestPosX, top:Image4RequestPosY});	
}


// utility function
/*
  @param		
  * minInput			minimum Number of  input scale
 	* maxInput			maximum Number of  input scale
  * minOutput			minimum Number of  output scale
  * maxOutput			maximum Number of  output scale
  * inputNumber		Number in input scale to be translated
*/
sym.getTranslation = function(minInput, maxInput, minOutput, maxOutput, inputNumber) {		
  var translatedVal = ((inputNumber - minInput) * (maxOutput -minOutput)/(maxInput - minInput) ) + minOutput;
  return translatedVal;	
}

Answer 1

Move with transform: translate3d(x, y, 0); inside requestAnimationFrame ( more description and polyfill )