Jump to content
GreenSock

axy2016

MorphSVG - How to convert one shape into multiple smaller pieces?

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

Hello,

 

I have a square that I want to morph into three circles.

Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape?

The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up.

 

Thank you!

 

tl = new TimelineMax({});

MorphSVGPlugin.convertToPath("circle, rect")

tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");

 

See the Pen bEmWPe by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi axy2016 :),

 

Welcome to the forums.

 

The MorphSVG plugin works path to path - so to make a square morph into three separate circles, you'd have to make your three circles into a single path and I don't think you're going to get the quality you'd like by doing it that way. To get the best results with the most control, I'd say you want to stay with a path to path process.

 

You can make your three initial shapes look like a solid square and then morph to three circles. I made a pen to show you how that could work.

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

 

I used 2 small squares and a rectangle to create the illusion of one large square and then grouped those three elements so I could control them as if they were just one element. Those three pieces then morph into the circles. The only problem I ran into was that I could see the edges of the three elements making up the 'fake' square even though the positioning was perfect. I solved this by adding a stroke to those paths that matched the background color.

 

I'm not sure what your project is, but hopefully this helps or gives you some ideas.

 

Happy tweening.

:)

  • Like 5
Link to comment
Share on other sites

Great demo, Craig.

 

Yes, I think you are right that doing the extra work of breaking apart the square will give you the best control.

 

For kicks, I did a quick job of splitting one square into 3 circles and it's actually pretty good:

 

http://codepen.io/GreenSock/pen/qbJXVq

  • Like 5
Link to comment
Share on other sites

Thanks Carl. :)

 

I actually made something similar to your demo when I first started working on an answer for this post, but switched back to the multi-path route for better control.

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