Need to change direction of feTurbulence filter

[lessing]

Hi there,

trying to get this girls hair waving from wind. Obviously the parameters are not set to look like waving hair just yet, I've set them to show you my problem:

 

The waves are coming in horizontally. I get that this is a property of the feTurbulence filter, but I just can't for the life of me get the SVG right to animate things vertically instead!

I was trying to separate baseFrequency into baseFrequencyX and baseFrequencyY to be able to animate them separately, but it's not working for me.

So either I need to somehow rotate whole/parts of the SVG filter, or animate the baseFrequency matrix.

 

Anyone who has a clue?

 

Thank you!

See the Pen RGqqwX?editors=1010 by lessing (@lessing) on CodePen

[Jonathan]

Hello lessing, and welcome to the GreenSock Forum!

 

Have you looked at the SVG spec documentation for <feturbulence>?

 

One way is to play with the baseFrequency attribute  ..

• The baseFrequency attribute represent The base frequencies parameter for the noise function of the <feturbulence> primitive. If two <number>s are provided, the first number represents a base frequency in the X direction and the second value represents a base frequency in the Y direction. If one number is provided, then that value is used for both X and Y.

 

baseFrequency: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/baseFrequency

 

Another way is to rotate the SVG graphical element that the turbulence filter is applied to, to change the direction.

 

[lessing]

Thank you Jonathan!

I understood the principle of providing two values for X,Y, but I don't get how I animate them in GSAP?

 

In the SVG i type

 

baseFrequency="0,0"

 

then I want to animate only the second variable, so I would expect either 

 

TweenMax.to("#turbulence", 8, {

  attr:{"baseFrequency":"0,0.1",

  repeat:-1,

  yoyo:true

});

 

or 

 

TweenMax.to("#turbulence", 8, {

  attr:{"baseFrequency":[0,0.1],

  repeat:-1,

  yoyo:true

});

 

But I can't get it to work? How do I feed GSAP with a string that's actually an arrayish thingie?

 

Also very interested in where I should put a rotation of the filter, as I've tried pretty much every node in the SVG tree and nothing works ;(.

 

Thank you!

[OSUblake]

GSAP can interpolate strings, but you're using an outdated version.

See the Pen jrXGBO by osublake (@osublake) on CodePen

 

I'm not sure using a filter to animate hair will work that well. I think changing the actual geometry might look better, e.g. using MorphSVG to change the path.

[Jonathan]

repeat:-1, yoyo:true would not go inside the attr:{} object since there GSAP special properties and not attributes.

[lessing]

Thank you both, that's so kind!

I knew it couldn't be that hard

 

Regarding which method: I did think about morphing instead, but manually creating keyframes to morph between in Illlustrator seemed a bit tedious. Problem is, most filters (e.g. waves) in Illustrator do not have a "time" property for obvious reasons.

 

Another alternative I was considering was to generate a GIF in After Effects, but the aliasing would probably be nasty. Maybe one could use 20 PNGs to cycle between and still get a decent size?