MorphSVG: change start AND end point

[webtourismus]

Hi there,

I've got a problem with MorphSVG. I'm trying to morph a circle into some kind of flower. Basically it works, but due to weird starting and endpoints of my path the animation is a bit quirky. I've already tried to use the findShapeIndex() utility, but it doesn't really help me as it only allows to change the starting point of my circle, but not the starting point of my flower.

 

How can I set both - the circle and the flower - to use the top center point as anchor for the animations?

 

See the Pen QNaKxW by hudri (@hudri) on CodePen

[GreenSock]

It's not really possible to alter the beginning and ending points independently because points always go in order. In other words, the start and end points are identical (unless it's an open shape of course, in which case all you can do is reverse the shape). Think of it like taking a pen, pressing it onto the paper, and drawing the shape; you'd always end up where you started (if you close the path). See what I mean? 

 

If you want super tight control over where each point is placed in the shape(s), you can just add them in your authoring program. In other words, add anchor points where YOU want them instead of having MorphSVGPlugin add them for your automatically. 

 

Does that help? 

[OSUblake]

While I can't argue with Jack's advice, I still think this is an interesting question as there are number of reason you might need to change some points around. Usually to change something like the winding values for a fill rule, but you could be working with a derpy designer, or in @webtourismus case, starting with a circle. I didn't check, but I'm pretty sure the plugin will always set a circle's starting position to 3 o'clock.

 

The MorphSVGPlugin has some methods that can help you do this. Unfortunately, the findShapeIndex tool doesn't provide a way to update it, so you really can't do both at the same time.

 

Changing the start point on a closed path isn't too complicated. First, convert the path to raw values. This returns an array of arrays, Array<Array<number>>, corresponding to each "M" command in the path, so there's usually only 1 array.

var data = MorphSVGPlugin.pathDataToRawBezier("#foo");

The path commands are stripped out of the arrays, but the order remains the same. So the first 2 numbers are the move command, and every 6 numbers after that is a path segment.

Path = M 1,2 C 4,5,6,7,8,9 C 10,11,12,13,14,15 C ...
Raw  = 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15 ...

Since the path is closed, drop the first 2 numbers as they are just going to end up being the last 2 numbers. Depending on the direction you want to go, you're either going to move the front segment to the end or vise versa. So move the first 6 numbers to the end, or the last 6 numbers to the front. Once you've moved them, copy the last 2 numbers to the front.

 

Now you just need add in the path commands and put the new path data on your element. The pattern is still the same. Start a string with "M" and add the first 2 numbers. Now add a "C" and the next 6 numbers and repeat that pattern to the end.

 

I set it up to reorder both paths. The green path runs counter-clockwise, because that is the way it's drawn, and of course doesn't start where you want it.

See the Pen EKoEXB?editors=0010 by osublake (@osublake) on CodePen

[webtourismus]

Hi Blake,

thanks a lot for your extensive answer, this will help me to get a real smooth animation