Jump to content
Search Community

Animating a svg filter

JensK test
Moderator Tag

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

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

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...

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.
  • Create New...