Animating a svg filter

[JensK]

Hi guys,
I  created a quick codepen, because I wanted to see if I can "unblur" any html element I desire. I can't see the error in my thinking, why doesn't my linked codepen work?

 

What should happen? A blured text should unblur
What happens? Nothing

See the Pen WgOZYv by nahilep (@nahilep) on CodePen.

[GreenSock]

That's a browser bug - if you look at Dev Tools, you'll see that GSAP is updating the values correctly, but the browser isn't repainting as it should. 

 

One way to resolve that is to FORCE the browser to repaint by changing the filter, then calling offsetWidth, then setting the filter back again in an onUpdate. Here's a demo with a function that you could reuse: 

 

See the Pen 2617939b4f5def538260d82b621d17ec by GreenSock (@GreenSock) on CodePen.

 

I also noticed that Safari snaps to whole pixel values regardless of what GSAP feeds in. There's no way to get around that (as far as I know). In general, CSS filters like this can be quite buggy in various browsers. It's not something I'd really recommend. Blur filters are notoriously CPU-demanding too, so be careful. 

 

[Sahil]

I noticed this in Chrome few days ago, solution I came up with was using filter on svg element. Then set svg opacity to 0.01 and set position to fixed so element will stay in viewport.

 

See the Pen QVgaBJ?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

[JensK]

Thanks @GreenSock,

I feared it was something like that. Also thank you for your headsup on safari.

edit:

@Sahil Wow, thank you for that input. You posted just seconds before my original post

Edited September 4, 2018 by JensK
race condition

[GreenSock]

Nice solution, @Sahil! Seems like we've gotta do double-backflips to get browsers to repaint properly. Too bad. 

 

UPDATE: it looks like @Sahil's solution doesn't work in Safari. Doh!

[PointC]

You can make it work in Safari with @Sahil's trick if you set the SVG width/height to 100%.

 

See the Pen MqoQJa by PointC (@PointC) on CodePen.

 

I'd also note that none of the above solutions will work in Edge. In general I'd recommend avoiding blurs unless they are absolutely necessary to the desired end result because they are so expensive. (and a pain to get working correctly) Happy tweening.

 

[JensK]

Thanks guys,
with your comments our customer could get convinced that it is not a good idea to blur a 500kb image. They still wanted it and I ended up doing it the dirtiest way I could imagine, but it works fine.

 

What we do now is crossfading a blurred image and an unblurred version. No code example, because I think this should not reproduce.

This comment is meant as a thank you. Keep up the good work!

[OSUblake]

2 hours ago, JensK said:

What we do now is crossfading a blurred image and an unblurred version. 

 

Sometimes you have to make sacrifices with animations. Google wrote an article about doing a crossfade blur for better performance.

https://developers.google.com/web/updates/2017/10/animated-blur

 

[Christopher DuCharme]

I'm noticing in Chrome there is a hard line / sharp cut off of the blur.  Especially to the left and top.

 

Is there anyway to smooth this out in Chrome so there are no hard edges on the blur?

[OSUblake]

Research how to use filters. They have can have a x, y, width, and height value.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Filter_functions