Jump to content
Search Community

Animate <feTurbulence> SVG filter

emilychews test
Moderator Tag

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

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

  • 10 months later...
On 4/13/2019 at 10:49 AM, PointC said:

Yep, the AttrPlugin is automatically loaded with TweenMax.

Hi Craig, I noticed when using this we get the error  "Error: <feTurbulence> attribute numOctaves: Expected integer, "2.5664"." 

I was wondering if any one has any ideas hot to avoid getting these errors. It just seems to not like the "numOctaves" attribute but works fine.

 

Thanks for any ideas!

On 4/13/2019 at 10:49 AM, PointC said:

 

 

 

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.

 

 

 

Link to comment
Share on other sites

13 hours ago, errrrs said:

I noticed when using this we get the error  "Error: <feTurbulence> attribute numOctaves: Expected integer, "2.5664"." 

I was wondering if any one has any ideas hot to avoid getting these errors. It just seems to not like the "numOctaves" attribute but works fine.

You can round the values using the SnapPlugin in GSAP 3 or use the RoundPropsPlugin in GSAP 1-2 to fix those errors. 

See the Pen zYGwvRa?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks Zach! 

I was able to get the errors to stop using snap, although I feel like the way I got there was probably a little wonky.

 

 let numOctOut = gsap.utils.snap(.25, 4); 

tl.fromTo("#bigturbulence feTurbulence", 1, { attr: { baseFrequency: 0.005, numOctaves: numOctOut }},{ attr: { baseFrequency: 0, numOctaves: numOctOut }}),

 

I think I just dont understand the snap syntax all the way but this works and the errors have stopped. 

 

Thanks again.

Link to comment
Share on other sites

@errrrs your code wouldn't animate the numOctaves at all. When you set up your numOctOut to be gsap.utils.snap(.25, 4) that's basically saying "take the number 4 and snap it to the closest increment of .25 and return that"... so that simply returns 4. You're plugging the number 4 literally into both the "from" and "to" values of the tween, thus there's no animation. See what I mean? 

 

Are you trying to animate that number instead? 

  • Like 1
Link to comment
Share on other sites

Hi Jack,

Thanks for the reply. Yeah I was pretty sure how I got to where I did was wrong.

 

I am basically trying to tween between 0 and 4 on the  numOctaves attribute. It was working before but throwing errors  like Expected integer, "2.5664". - about 30 errors on each tween. 

 

I am trying to animate a SVG filter on page transition. For whatever reason, baseFrequency doesnt throw errors, just numOctaves.

Link to comment
Share on other sites

That's just because the browser is fine with decimals for baseFrequency but it expects ONLY whole numbers for numOctaves. 

 

Didn't Zach's demo already resolve this for you? Using snap is a great solution. So for example, snap: {numOctaves: 1} just tells GSAP to always snap to the closest increment of 1 each time it updates the numOctaves property. Does that make more sense now? 

 

If you still need some help, please provide a reduced test case (codepen) and we'd be happy to assist. 

 

 

  • Like 1
Link to comment
Share on other sites

Jack, thanks again.

 

I'm just a bone head and was having trouble implementing snap. I was misunderstanding how it worked.   I got it working now like so ---

 

Im using this with SWUP to create page transitions.

 

Page Transition out ->

 tl.fromTo("#bigturbulence feTurbulence", 1, { attr: { baseFrequency:0, numOctaves: 0 }},{ attr: { baseFrequency:  0.005, numOctaves: 4 }, snap: { numOctaves: 1 }}),

Page Transition In ->

tl.fromTo("#bigturbulence feTurbulence", 1, { attr: { baseFrequency: 0.005, numOctaves: 4 }},{ attr: { baseFrequency: 0, numOctaves: 0 }, snap: { numOctaves: 1 }}),

 

 

  • 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.
×
×
  • Create New...