Jump to content
Search Community

Morph Path Circle to Line SVG

Victor Work test
Moderator Tag

Recommended Posts

1 hour ago, ZachSaucier said:

Unfortunately GSAP can't magically interpret the effect you are wanting and rearrange the order to fit (yet ;)).

GSAP 4 will have a predictive algorithm to create your animations before you even think about them. 

  • Haha 1
Link to comment
Share on other sites

  • 1 month later...

Hey @Victor Work :)


I know this thread is a few weeks old and you probably already solved your problem, but you may find this helpful in the future. It was funny — the day you posted this question I was literally in the middle of writing a tutorial about this very topic. I had to wait for for my new blog launch though. Here's a circle → line animation option for you that is quite smooth and uses the DrawSVG plugin rather than a morph.


See the Pen pogVgGO by PointC (@PointC) on CodePen


Tutorial: https://www.motiontricks.com/unwrap-svg-circles-and-ellipses/


Happy tweening and keep your pixels movin'.




  • Like 3
Link to comment
Share on other sites

Hey @PointC
That's an awesome Tutorial, thanks for sharing. 
For sure that's will be very usefull in the future, in the project (that will be released very soon). I used  @mikel's approach.
But for sure is amazing to know how flexible Morph & DrawSVG are, giving a ton of opportunities to explore.

The project I used this effect:

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