Liquid shape

[Mat_ 0 Likes (Newbie)]

Hi everyone, 

 

I'm totally new to greensock and I have some questions.

I'd like to know if GS is the tool I need to realize a "simple" animation.

The idea is to animate a simple shape, like this one :  to make it wave a little. Nothing too fancy.

 

If it is, can you point me where to start please ? Thanks a lot !!!

 

Best regards,

 

Mat

 

See the Pen mWNpBo by Mat_ (@Mat_) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Check out the MorphSVGPlugin...

https://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

 

It's a paid plugin, but you test it out for free on CodePen...

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

[Mat_ 0 Likes (Newbie)]

Check out the MorphSVGPlugin...

https://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

 

It's a paid plugin, but you test it out for free on CodePen...

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

 

Thanks OSUblake, I think that the effect is almost the same that I see on the cape of the hero. Any tutorial available to reproduce it, to see if it's in my skills ? 

Thanks !

[OSUblake 9,990 Likes (Superhero)]

That's pretty complicated. How are your JS and SVG skills? Animating the control points of a path is probably the easiest way to do something like if you don't want to use the MorphSVGPlugin. 

 

Here are some good threads about animating waves...

https://greensock.com/forums/topic/15603-getting-control-points-of-a-wave-svg-and-use-it/

https://greensock.com/forums/topic/15119-how-to-make-a-bouncy-line-with-gsap/

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