Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JensK

Animating a svg filter

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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 by JensK
race condition
  • Like 1
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 6
Link to comment
Share on other sites

  • 2 weeks later...

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!

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×