Question

Is there a plugin / procedure / CSS line / different method to integrate with the jQuery UI framework so that it can take advantage of hardware accelerated transitions where possible.

For example one site is using a gallery that users the UI framework to slide images in and out on user clicks of corresponding arrows. I’d like this to be as smooth as possible.

Answer 1

You can access/add hardware accelerated css transforms using jQuery. However jQueryUI doesn’t use css transforms for its stock animations.

This means that you would have to manually create a slide animation in css. An example,

 $("#myDiv").css("-webkit-transform", "translate3d(800px, 0px, 0px)"); 
 //or some other transform type, (this is specifically for webkit)

Then in your css, you’d need an easing function like:

#mydiv {
   -webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   -ms-transition:all 0.5s ease-in-out; 
   transition:all 0.5s ease-in-out; 
}

This will give you a hardware accelerated transition that moves #myDiv 800px to the right.