Jump to content


Animating SVG attribute, blur, very bar rendering

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



I'm trying to animate the stdDeviation attribute of a svg filter, it's actually working when I inspect the element, it's updating the attribute, but the rendering is either very bad and slow (firefox) or not rendering at all (chrome). Are the browsers struggling to render properly an animated svg filter?


the SVG filter (if stdDeviation="0 20" it works fine but if I animate the values it render very pourly)


 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  viewPort="0 0 500 300">
  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
  <feGaussianBlur id="test" in="SourceGraphic" stdDeviation="0 0" />


the CSS


p {
	width: 50%;
	margin: 0 auto 50px auto;
	font-size: 35px;
	font-weight: bold;
	color: white;
	filter: url("#blur");



and JS :


let currentPixel = window.pageYOffset;

const looper = function(){
	const newPixel = window.pageYOffset;
	const diff = newPixel - currentPixel;
	const speed = diff * .1;
	const blur = speed < 0 ? speed * -1 : speed;
	//TweenMax.to($('.item-content'), .5, {skewY: speed + 'deg'});
	TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur}});
	//TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur * 2}});
	currentPixel = newPixel;



Once again, GSAP seems to do the job properly, but the rendering on the screen is terrible.


I might miss something very basic. If anyone has an idea,...


Thank you


See the Pen KgrarX by romaingranai (@romaingranai) on CodePen

Link to comment
Share on other sites

Nice trick! The values that you are trying to apply are too small to see changes in Firefox. (At least that's what it seems like)


Chrome is doing weird stuff, it doesn't render any changes. So I tried adding circle to svg and applied filter to it and it started working, only to stop when circle got out of the viewport. Then I set the svg's position to fixed and it worked.


Maybe you can add tiny svg in background somewhere with fixed position and have it's opacity to 0 or stroke/fill same as background. Though not sure what is the reason for such behaviour.


See the Pen djxYYW?editors=1010 by Sahil89 (@Sahil89) on CodePen


  • Like 3
Link to comment
Share on other sites

Hey Sahil,


Nice one, thanks for that, I have the feeling that some stuff change some time ago with the rendering of SVG in the browser, the first demo I did (actually the first pen, that I modified some day ago), was working ok (not perfectly), but at least the animation and the rendering of the blur was working fine. And I think it's not the only issue I found when using svg filter in general, like displacement map, . I was wondering if someone could explain me what exactly happens and happened?


Like this example doesn't really work : (SVG displacement map) and I'm pretty sure it was working



See the Pen WQyBJb by osublake (@osublake) on CodePen





If anyone has any other ressources or can explain why it stops to work or why it render super badly,...



Anyway, thanks you Sahil.

Link to comment
Share on other sites

interesting. the displacement map demo from @OSUblake is working fine in Safari and FireFox, but not doing anything in Chrome.

Inspector shows values changing but no updates being rendered.

I don't know what may have changed.

Link to comment
Share on other sites

It might be related to base64 images in Chrome which have various bugs when dealing with base64 images, along with being cross domain?


So its probably related to some chrome shenanigans of them breaking things and then fixing them. Oh, and then them breaking it again. :(

  • Like 3
Link to comment
Share on other sites

26 minutes ago, Jonathan said:

So its probably related to some chrome shenanigans of them breaking things and then fixing them. Oh, and then them breaking it again. :(


Chrome shall henceforth be known as Chromernet Explorer 6.

  • Haha 3
Link to comment
Share on other sites

When i inspect Chrome, GSAP is indeed interpolating values for the svg filter. But Chrome isn't rendering anything, oh Chromernet Explorer 6 :(

  • Like 2
Link to comment
Share on other sites

I did leave a clue in the comments of my demo, and Twitter, and on somebody else's blog post on CodePen that there is a bug...






  • Like 2
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.