Animate <feTurbulence> SVG filter

[emilychews 17 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[emilychews 17 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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