1

I am having a performance issue when combining blurred images with some subpixel translate animation (I am using jQuery Transit): 

filter: blur(5px);^

On mousemove, blur is recalculated to simulate Depth-of-Field. When moving, the elements aren't moving as fluid as I would like them to be.

Demo here

Buggy movement appears when you click on a bottle in a -webkit browser

Any idea/tips how I could accelerate this?

I was thinking about pre-calculating every focus step and using opacity but this is the last solution I would use.

Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
Vincent Duprez
  • 3,772
  • 8
  • 36
  • 76
  • Switch to `mouseover` you need to blur only when the mouse is over not at every pixel move – Ibu Nov 20 '13 at 17:44
  • @Ibu this isn't really the issue as event with the keyboard arrows (without mouse-move) the movement is the same, and behaviour is not exactly the same with mouseover as it doesn't blurs progressively but with steps on element hover. but thanks – Vincent Duprez Nov 20 '13 at 18:37
  • this will be be an optimization of your code – Ibu Nov 20 '13 at 18:57

1 Answers1

1

It looks like you're translating and scaling the images at the same time, which is causing the jumpiness. Try using translate3d -webkit-transform: translate3d(x,y,z) instead and modifying the z position instead of scaling. This should help quite a bit with performance as your animations will now be hardware accelerated.

Maxsquatch
  • 202
  • 1
  • 4
  • I found this hardware trick and added a z value on the css by default to enable hardware acceleration. By the way Transmit doesn't use Z... just discovered this. Ill try to reimplement this with jquery animate – Vincent Duprez Nov 20 '13 at 18:40