Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
romain.gr

Animating SVG attribute, blur, very bar rendering

Recommended Posts

Hi, 

 

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" />
  </filter>
</svg>

 

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;
	
	//console.log(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;
	
	requestAnimationFrame(looper);
}

looper()

 

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

×