Jump to content
Search Community

Wavy Tail Animation

menschies 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

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

 

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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/

 

 

 

 

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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. 

 

  • Like 6
  • Thanks 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...