Animate SVG path

[hellehs90]

Hi, I was wondering if anyone could help me out with a pretty complex path animation. I have a path looking like a radio wave and I need it to go through four stages where the last one just makes the path into a straight line (see attached image). Is this possible with GSAP ? 

My SVG looks like this: 


<svg id="secondwave" xmlns="http://www.w3.org/2000/svg" width="1440" height="165" x="0px" y="0px"

             viewBox="0 0 1440 168" style="width:100%;height:auto;" xml:space="preserve">

        <path class="st0" d="M0,167C11.2,167,5.9,1,15.5,1S23,167,33.2,167S37.5,1,57.8,1s13.4,166,32.1,166S99.6,1,122.1,1

            s16.1,166,32.1,166S169.7,1,189,1s15,166,30,166c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166

            s11.8,166,30.5,166C369.4,167,361.9,1,371,1s7.5,166,16.6,166S394,1,403.1,1s3.7,166,17.1,166S425,1,436.8,1s12.3,166,17.1,166

            c4.8,0,4.3-166,16.1-166c11.8,0,4.8,166,17.1,166c12.3,0,5.4-166,15.5-166c10.2,0,1.1,166,17.7,166c16.6,0,12.8-166,28.4-166

            c15.5,0,19.8,166,33.7,166S599,1,616.1,1c17.1,0,7.5,166,29.4,166C661.1,167,661.1,0,682,1s18.7,166,34.8,166

            c16.1,0,13.9-166,32.7-166s13.4,166,31.6,166S784.8,1,801.9,1c17.1,0,5.9,166,18.2,166c12.3,0,5.9-166,15.5-166s-1.1,166,17.1,166

            S854.4,1,868.8,1c14.5,0,5.4,166,19.8,166c14.5,0,5.4-166,14.5-166c9.1,0,5.4,166,16.6,166S925.6,1,935.2,1s7.5,166,17.7,166

            c10.2,0,4.3-166,24.6-166c20.3,0,13.4,166,32.1,166s9.6-166,32.1-166c22.5,0,16.1,166,32.1,166s15.5-166,34.8-166s15,166,30,166

            c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166c20.3,0,11.8,166,30.5,166s11.2-166,20.3-166s7.5,166,16.6,166

            c9.1,0,6.4-166,15.5-166c9.1,0,3.7,166,17.1,166c13.4,0,4.8-166,16.6-166s12.3,166,17.1,166s4.3-166,16.1-166s4.8,166,17.1,166

            s5.4-166,15.5-166s1.1,166,17.7,166"/>

        </svg>

[Carl]

Hi and welcome to the GreenSock forums,

 

MorphSVG should really help with this. Here is a basic demo:

 

http://codepen.io/GreenSock/pen/VaVrNM

 

To use MorphSVG you will need to upgrade to a Shockingly Green membership.

 

You can learn more about MorphSVG here: http://greensock.com/morphSVG

 

I would encourage you though to try it out as much as you like before you buy. You can fork the demo I provided and add your own SVG.

 

Tip: create a path for EACH wave style and just morph from one to the other as we do with the hippo and elephant: http://codepen.io/GreenSock/pen/rOjeRq

[PointC]

That's great Carl.

 

I have nothing to add to the answer here other than my mind is still blown every time I use the morphSVG plugin. The morphing itself is amazing, but when you add in the ability to generate motion guide data for the BezierPlugin, it's an incredible addition to the GS plugin collection. So cool. 

[hellehs90]

Thanks!!