Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hellehs90

Animate SVG path

Recommended Posts

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>

post-38614-0-73762100-1462187482_thumb.jpg

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
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.

×