jQuery animation jagy transition

I have a problem with is driving me insane. I use jQuery.animate() to zoom an image element, everything is working great but the transition is not smooth, it kinda jagy , first I thought that a “flash like” smooth transition is not possible but then I’ve seen this component..

So can anybody please explain to me how this kinda of smooth transition is possible?

Thank you.

Instead of using width and height, use CSS3 transform for smooth scale and movements. Additionally, 3d transformations can utilize hardware acceleration on webkit browsers which will improve performance on some cases.

Obviously, fallback with width/height may need for older browsers.

FWDesign said
first I thought that a “flash like” smooth transition is not possible but then I’ve seen this component.. http://codecanyon.net/item/estro-jquery-ken-burns-swipe-effect-slider/235111 So can anybody please explain to me how this kinda of smooth transition is possible?

That component was made by an animation ninja. My guess is there was a lot of performance testing involved that decided which animation type (jQuery, CSS3 , requestAnimationFrame) worked best for each environment.

My guess is that they are using canvas and requestAnimationFrame

I bought the file trying to learn the mechanism but quit after reading 10 lines from their code ( too complicated for non ninjas to understand ) – anyway, great job from pixelentity

Thank you guys for answering, about the css3 I tried it works great on all browsers except safari, the only way this can be done secure is with canvas.

FWDesign said
Thank you guys for answering, about the css3 I tried it works great on all browsers except safari, the only way this can be done secure is with canvas.

Safari needs hardware acceleration to get almost the same performance as Chrome. I guess usage of canvas does this job and the same can be achieved on safari with 3d transform. Just set any 3D property like translate3d(0,0,0) and that’s enough. Some cases may need css based transition for guaranteed performance.