Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Morph Path Circle to Line SVG

Recommended Posts

Hey GSAP'ers,
I'm trying to morph a Circle SVG to a line as you can see on the PEN.
I'm wondering what's the best way to approach.


Thanks in Advance

Cheers

See the Pen wvMaYBe by victorwork (@victorwork) on CodePen

Link to post
Share on other sites

Situations like this require careful ordering of points so that they match up with the before and after paths. Unfortunately GSAP can't magically interpret the effect you are wanting and rearrange the order to fit (yet ;)). 

  • Like 1
Link to post
Share on other sites
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 post
Share on other sites

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 post
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:
http://by-victorwork.com/1st11/

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

×