Jump to content
GreenSock

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

Animating / Updating SVG Filter Effects

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

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
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.
×