Morphing a square into a triangle

[meyian]

I'm trying to smoothly morph a square into triangle, in which the top corners slowly move towards each other, and meet in the middle.

 

If you look at the Codepen, you'll see two rectangles turning into a triangle, one after the other, and in different ways.

 

This was my process: I created the two SVGs in Illustrator. I created a 1-pixel stroke rectangle with a transparent fill, clicked Object > Expand, and then saved the SVG using "Save for Web and Devices". The triangle was created similarly, this time by adding an anchor point in the middle of the two top corners of a square, and then deleting the other two anchor points, expanding, and then saving.

 

In the Codepen, you'll see I used the basic line

TweenLite.to("#rectangle", 1, {morphSVG:"#triangle"});

to morph my two paths.

 

 

Three questions, please:

 

1) What's the Illustrator workflow for making single-line SVG paths in Illustrator? Like what I'm trying for above, but maybe something with curves next time. 

2) How about filled shapes?

3) Am I correct in thinking I'll need to play around shapeIndex to get the animation I want?

See the Pen VjEwZV by meyian (@meyian) on CodePen

[GreenSock]

I'm on the road and don't have time to address #1 and #2, but for #3 in your particular case since you want precise control over merging two points into one, it's probably best to just take your square in Illustrator, duplicate it and drag the two corners to the center and basically make it into the triangle (though this triangle would technically have two points on top of each other at the tip) and use that as the shape you want to morph to, and you can set the shapeIndex to 0 so that it doesn't do any automatic attempts at figuring out how to shift things around to reduce the travel distance of the points. 

 

Usually you don't have to do that sort of thing and you can just let MorphSVGPlugin work its magic and fabricate points for you on-the-fly, but you described a very particular effect that won't really work with fabricating points on-the-fly, thus it's easiest to just control the points yourself by duplicating the shape and moving its points precisely the way you want. 

 

Does that help? 

 

And yeah, it's absolutely fine to use shapes with as many curves as you want.

[meyian]

In your particular case since you want precise control over merging two points into one, it's probably best to just take your square in Illustrator, duplicate it and drag the two corners to the center and basically make it into the triangle (though this triangle would technically have two points on top of each other at the tip) and use that as the shape you want to morph to, and you can set the shapeIndex to 0 so that it doesn't do any automatic attempts at figuring out how to shift things around to reduce the travel distance of the points. 

 

Usually you don't have to do that sort of thing and you can just let MorphSVGPlugin work its magic and fabricate points for you on-the-fly, but you described a very particular effect that won't really work with fabricating points on-the-fly, thus it's easiest to just control the points yourself by duplicating the shape and moving its points precisely the way you want. 

 

Does that help? 

 

It definitely did!

 

Using your advice, I got the effect I wanted. Thanks so much!

 

See the Pen AXJjKm by meyian (@meyian) on CodePen

 

 

These are the steps I went through in Illustrator to get rid of the extra outline:

 

1) After expanding the shape, by following the steps outlined in the question, I was basically given something with two outlines. The outer square has a black fill, and the inner square has a transparent fill. To the naked eye, it looks like it should be just one path. We need to delete the second outline.

 

2)  To do so, select the whole thing, and clickObject > Compound path. This will clearly reveal the two squares that made what that you thought was a single square.

 

3) Painstakingly delete anchor points on the outline you don't want, until you have just one shape.

 

4) Choose a stroke color for it, since it will have transparent fill and transparent stroke.

 

5) Now you can save for web and devices, and get the SVG you want.

 

Thanks again, GreenSock! And if anyone has a better workflow than this, please do share.