Animating / Updating SVG Filter Effects

[ochalmers]

Hello everyone.

 

After searching through the forums i've found no particular subject related to SVG filter effects. Is there any support for these filter effects within GSAP at the moment? Attached is my codepen where I have set my SVG to have a GaussionBlur with stdDeviation of 0,50. What I want to do is animate or update that number from 0,50 to 0,0. 

 

 

Any ideas / suggestions as to how I might go about doing this in a timeline? 

 

Thanks for listening!

 

See the Pen gpZPPv by olichalmers (@olichalmers) on CodePen.

[Carl]

Our tools don't have anything specifically related to SVG filters, but you can totally tween numeric values in attributes using the AtrrPlugin like

.to(blurNode, 0.5, {attr:{stdDeviation:20}})

http://codepen.io/GreenSock/pen/gpDrC?editors=001

 

Be sure to see how Chris Gannon animated the seed attribute too!

http://codepen.io/chrisgannon/pen/ZYVOzO

[Jonathan]

To add to Carl's great advise:

 

Example of using GSAP to animate SVG filters .. in this case hueRotate using feColorMatrix (full cross browser including IE10+)

 

See the Pen MwPzox?editors=101 by jonathan (@jonathan) on CodePen.

 

Example of using GSAP to animate CSS Filters .. in this case hueRotate (cross browser but no IE)

 

See the Pen pJxRwG by jonathan (@jonathan) on CodePen.

 

They can be modified to animate other Filters as well like in Carl's example of the stdDeviation  using the attrPlugin.

 

Also check out this forum topic:

 

http://greensock.com/forums/topic/12102-e-advertising-headache-html5-banners/

 

Reference:

SVG feColorMatrix: https://developer.mo...t/feColorMatrix

W3C SVG Filters feColorMatrix: http://www.w3.org/TR...l#feColorMatrix

W3C feColorMatrixElement: http://www.w3.org/TR...orMatrixElement

Can I Use  CSS Filters: http://caniuse.com/#feat=css-filters

Various CSS Filters:http://bennettfeely.com/filters/

How to target specific color(s) uisng CSS Filter Tint: http://stackoverflow...specific-colour

[Jonathan]

Here is an example of an SVG Filter - Gaussian Blur:

 

See the Pen GJPjjQ?editors=101 by jonathan (@jonathan) on CodePen.

 

With this one GSAP taps into the feGaussianBlur tag using stdDeviation  to animate the Gaussian Blur using the AttrPlugin, like Carl had suggested above.

 

Hope this helps!

[ochalmers]

Thanks so much for your replies guys. Will post an updated pen once I get around to digging into these suggestions.