Jump to content
GreenSock

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

Animate <feTurbulence> SVG filter

Recommended Posts

Hi,

 

I'd like to animate an SVG <feTurbulence> filter, where I can animate the `baseFrequency` and `numOctaves` values down to 0. 

 

How do I select these values to animate them in GSAP, and is this possible?

 

Codepen link attached, but I guess on a theoretical level it will either be something like this:

 

Pseudo Code
 

Tweenmax.to (feTurbulence, 1, {numOctaves: 0, baseFrequency: 0})

 

Or would I do it something like this:

 

Pseudo Code
 

TweenMax.to([numOctaves, baseFrequency], 1, {opacity: 0})

 

And of course once I know which of the two theoretical ways is correct, how would I select with the turbulence filter itself or its attributes. I've traditionally only used GSAP on DOM or SVG elements and not filters or filter attributes so this is a tad confusing.

Many thanks in advance for any assistance.

 

 

See the Pen oOePNb by emilychews (@emilychews) on CodePen

Link to comment
Share on other sites

You'll just need to use the AttrPlugin. Please give this a try:

 

TweenMax.to("feTurbulence", 1, { attr: { numOctaves: 0, baseFrequency: 0 } });

 

More info:

https://greensock.com/AttrPlugin

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Thanks @PointC 

I deleted my initial reply because I see it is part of TweenMax (it was a question about how to add it to codepen because it's not on the list of plugins you can try on codepen).

Link to comment
Share on other sites

Yep, the AttrPlugin is automatically loaded with TweenMax.

 

See the Pen axyRqV by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

 

PS Check out this demo too. It shows what's loaded via TweenMax and has CDN links for the Club plugins for use on CodePen.

See the Pen djXzyR by GreenSock (@GreenSock) on CodePen

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