Q:

Smooth translation on mouse move

I'm trying to make 3D layer effect like on this page:
Example Page:
http://cloudraiders.com/
I did almost everything, but have one big problem that can't handle:
$("#mainView").mousemove(function( event ) {
  //getting mouse dimentions
  var pageX = event.pageX;
  var pageY = event.pageY;
  var mainWidth = $(this).width();
  var mainHeight = $(this).height();
  //
  //console.log(pageX);
  ("#mainView").find("li").each(function( index ) {             
    var depth = $(this).attr("dataDepth");
    var scalable = $(this).attr("scalable");
    var x = pageX*depth;
    var y = pageY*depth;
    var z = 0;      
    var thisScale = mainWidth / mainHeight * 1;
    //setting accelerated webkit transform                  
    $(this).css("-webkit-transform", "translate3d("+x+"%,"+y+"%,"+z+"px"+")");                  
    });
});

The problem is, that translate3d is not smooth like in example page. It is jumping.
When I'm moving mouse out of the window, and then enter in different place it is just jumping.
I'v found some solution in forum already, but didn't work to good with mouse move.
Any help will be a lot appreciated.
Regards!
EDIT:
I'v used Jquery animate function:
$(this).animate({ whyNotToUseANonExistingProperty: 100 }, {
  step: function(now,fx) {
  $(this).css('-webkit-transform',"translate3d("+x+"%,"+y+"%,"+z+"px"+")");
},
  duration:100
},'linear');

It works almost good, but the problem is, that Jquery is stacking queries. And if I will move mouse alot, animations goes on like for minute.

A:

When dealing with css animation/transformation, there is some performance trickt bear in mind. one of them is to set a default transform value (set to 0) in order to enable the rendering those element by default.
Try addind those rule as default in your css to your animated element ("li" in your case):
         transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
         transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
         backface-visibility: hidden;
 -webkit-backface-visibility: hidden;

Also, note that the website linked in your answer use the jquery parallax plugin, which take care of those accelerations issues for you.
And here some ressource about css transform/animation acceleration:
Increase Your Site’s Performance with Hardware-Accelerated CSS
DOM, HTML5, & CSS3 Performance
Related stackoverflow question

