Jump to content
Search Community

Animate SVG path

hellehs90 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

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


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:




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.
  • Create New...