Как добавить плавность анимации Dynamic Mouse Follow?

Question

[Hellarazor]

Есть такой код, он анимирует объекты при движении мышкой. Но хотелось бы получить плавную анимацию. Как сделать?

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

[Денис Инешин]

Перемещайте с помощью transform: translate3d(x, y, 0); внутри requestAnimationFrame (еще описание и полифил)