Wavy Tail Animation

[menschies]

Hey all! It's been awhile.

 

I have a couple of paths in an SVG I need to animate using a sinusoidal-like path with a fixed starting point and a variable end point. Imagine a tail flapping about in a strong wind.

 

If you can point me in the right direction, I am struggling to figure this out. Thanks!

 

See the Pen oPwyyq by macarius (@macarius) on CodePen.

 

[GreenSock]

Howdy, @menschies. Hm, your codepen seems to be missing a waveSVG() function. Are you saying that you've got existing <path> elements and you want them to animate their points in a fashion that'd simulate blowing in the wind? Like...always in a certain direction no matter where the start/end points are? Do you have a sample of what you're looking for? I'm not sure I really understand what your goal is here. 

 

Generally these forums are for GSAP-specific questions rather than a "how do I create this effect from scratch", but we'd be happy to help if we've got any pointers. 

[menschies]

Howdy, Jack (@GreenSock)!

 

Yikes, I made a blunder thinking there was a function, 'waveSVG', that took a path and made it wavy given a few variables -- solidified a "D'oh!" status for the week.

 

I updated the codepen with the creature and its tail. The goal: with tail origin anchored to the body, have a sinusoidal motion move the tail through its end. I could begin with straight or slightly curved path.

 

I was hoping to find examples I could learn from. After some review, one approach could be:

• get the points of the path in an array
• calculate a new position for each point using math functions for sine/cosine
• move each point in a loop using TweenMax.to elastic ease

 

Something like that? Is there an easier approach? Looking for pointers.

 

Also, if this is not the right place to request this kind of help, then StackExchange?

 

Appreciate your feedback.

 

 

See the Pen oPwyyq by macarius (@macarius) on CodePen.

 

[OSUblake]

8 hours ago, GreenSock said:

Hm, your codepen seems to be missing a waveSVG() function.

 

That's something you wrote. 

 

See the Pen WQjRXE by GreenSock (@GreenSock) on CodePen.

 

 

 

52 minutes ago, menschies said:

I was hoping to find examples I could learn from. After some review, one approach could be:

• get the points of the path in an array
• calculate a new position for each point using math functions for sine/cosine
• move each point in a loop using TweenMax.to elastic ease

 

 

Sounds like you get the concept.

 

See the Pen vdzjyg by osublake (@osublake) on CodePen.

 

 

 

Some related topics.

https://greensock.com/forums/topic/15270-animating-waves-with-gsap/

https://greensock.com/forums/topic/16371-svg-sine-wave-emulate-audio-equalizer/

https://greensock.com/forums/topic/16172-svg-wave-animation/

 

 

 

 

 

[menschies]

9 minutes ago, OSUblake said:

Sounds like you get the concept. 

 

Easier said than done--ha. Working on it. (more coffee please...)

 

Cool example. Especially like the graphical points to see the translation in action.

[OSUblake]

Thanks. You should be able to do something similar to that. Create an array of points, animate the points up and down, and then pass that array into that cardinal function on every update to get the path data for the tail. I can reduce that demo down later if you're still having trouble.

[green_machine]

I'll just throw out another possible solution, since I do a lot of character stuff with GSAP and recently did something similar with a tail (unfortunately I can't share it since it's client work that hasn't launched).

 

If it were me, I'd avoid all of the math and just create 4-5 (or more) slightly different tails in Illustrator (or whatever vector editor you're using) and use the MorphSVG plugin to make quick tweens between them in a loop. The "rubber hose" -ish illustration style that you're using on your character will work well with a handful of canned paths since it's not very detailed (in a good way). 

[green_machine]

Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.

 

See the Pen 747f76a3c94a5d03b51b50e58351abed by dsenneff (@dsenneff) on CodePen.

 

[GreenSock]

I don't mind if you use my waveSVG() function. Here's a forked version that starts with a flat tail so that the resulting curves look a bit more natural: 

 

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

 

I'm sure it could be tweaked to be more natural, but hopefully this gets you going in a the right direction. 

 

[menschies]

5 minutes ago, GreenSock said:

I'm sure it could be tweaked to be more natural, but hopefully this gets you going in a the right direction. 

 

?‍♂️ <-- me after seeing this... and now my back needs ice.

 

You the man!

[GreenSock]

Hilarious Glad it was helpful. Good luck with the Chiropractor. 

 

Thanks for being a Club GreenSock member! 

[OSUblake]

My turn!

 

I set it up to make it look like the wind is changing speed.

 

See the Pen PdKBXP by osublake (@osublake) on CodePen.

 

 

 

 

[Sahil]

Oh my turn! my turn!!

 

See the Pen VGzYWa?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

PS: Sorry couldn't resist 

[OSUblake]

???

 

I was not expecting that! 

 

 

[PointC]

Brilliant @Sahil!!!

 

That made my morning. ?

 

 

[GreenSock]

Hilarious, @Sahil!

 

@OSUblake, nice solution! I think it looks more realistic (in terms of the flow direction) if you make this change:
 

//OLD:
count += wave.speed;

//NEW:
count -= wave.speed;

 

?

[OSUblake]

Thanks! I thought something looked a little out of sync, but I couldn't put my finger on it.