Hacker News Reader

Comment by polskibus | Hacker News Reader

Blur is really slow, esp. when you're trying to animate it (to get a cool "materialization" effect).

Thought of a way to do a materialization effect with good performance. Fake it. If you set a low opacity on the blurred element (ie, put "opacity: 0.5" on the ".glass::before", essentially mixing the blurred image with the sharp one beneath it), this actually looks like it's half as blurred as before.

Opacity can be animated very cheaply, entirely on the GPU (source: http://www.html5rocks.com/en/tutorials/speed/high-performanc...), so if you animate this property from 1 to 0, you should a good materialization effect, without ever asking the CPU to recalculate the blur.

I'm going to fork the codepen and try this, will report back...

EDIT: see http://codepen.io/callumlocke/pen/EKuvs

For me (latest Firefox beta, on Windows 7) your materialization effect animates at about 2Hz.

[EDITED to fix a stupid mistake: I wrote 0.5Hz but meant once per 0.5s, or 2Hz.]

Weird. It works pretty smoothly on Chrome (about 50Hz). Just tried on FF/Mac, it's ultra slow there too. I think it must be redrawing the SVG every frame, if it's that slow. But in the HTML5Rocks tutorial Paul Irish says "Chrome, Firefox, Safari and Opera all hardware accelerate transforms and opacity." I'll try a few more things.

EDIT: ha, IE10/Win7 (in a VM) is super smooth for me. Still no idea what's going on with Firefox.

Reply on news.ycombinator.com