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

Share this post


Link to post
Share on other sites

Hey @Victor Work,

 

This is an option

 

See the Pen xxZGyLx by mikeK (@mikeK) on CodePen

 

Happy tweening on Sunday ...

Mikel

  • Like 5

Share this post


Link to post
Share on other sites

That's amazing. 
Thanks @mikel

  • Like 1

Share this post


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

Share this post


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

Share this post


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.

×