morphSVG change default circle anchor point

[Spoochy]

Hello guys,

 

I recently started developing with GSAP and i love it so far, its really great but my problem is that i am not able to change the anchor point of the circle...

 

even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle 

 

due to this issue the animation isn't the same on both sides and it looks really weird.

 

does someone know how to fix this issue?

 

i also saw a solution over here from OSUblake, but i am not able to figure out how to make that work

http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/

 

 

kind regards

See the Pen RopVge by Spoochy (@Spoochy) on CodePen

[Dipscom]

Hi Spoochy,

 

Welcome to the forums.

 

While I can understand what you mean when you say the animation looks weird I am not sure there is anything wrong going on.

 

I am not quite sure what you want to achieve when you say:

 

"even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle"

 

From the what I can see here, the second shape you are using seem to have 5 points to it and a circle is normally made of four points. There's always going to be some wonkiness as GSAP tweens the values of a four points shape into a five points.

 

I think you might have to break your circle down into a raw shape and/or reduce the number of points in the second shape.

 

Another option is to create some intermediate shapes to use in a sequence, that will give you the fine grain control you might be lacking now. You can sequence them up with TimelineLite (or Max).

[Spoochy]

Hi Spoochy,

 

Welcome to the forums.

 

While I can understand what you mean when you say the animation looks weird I am not sure there is anything wrong going on.

 

I am not quite sure what you want to achieve when you say:

 

"even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle"

 

From the what I can see here, the second shape you are using seem to have 5 points to it and a circle is normally made of four points. There's always going to be some wonkiness as GSAP tweens the values of a four points shape into a five points.

 

I think you might have to break your circle down into a raw shape and/or reduce the number of points in the second shape.

 

Another option is to create some intermediate shapes to use in a sequence, that will give you the fine grain control you might be lacking now. You can sequence them up with TimelineLite (or Max).

 

thanks for the response, at the moment the circle has 4 points like u mentioned, by default it will take the right point as default to morph to, and we would like to change that to one of the other points.

 

here is an example of what we are trying to achieve

http://oi68.tinypic.com/fbkf0o.jpg

 

i hope this will make it clear

 

kind regards

[Carl]

Thanks for the clarification. It seems you need a way to convert your <circle> to <path> where you have some sort of control over where the starting anchor point is.

 

This is a bit of a round-about way of getting pretty close to what you may need:

 

http://codepen.io/GreenSock/pen/woJreb?editors=1010

 

I used code from: http://stackoverflow.com/a/18473154 and http://jsbin.com/quhujowota/1/edit?html,js,output

[GreenSock]

If I'm understanding this correctly, this has nothing to do with converting the <circle> in a different way or anything like that - it's just a matter of changing the shapeIndex. In this case, the result Carl got in his latest demo is identical to the original demo with shapeIndex:-1. Right?

 

Ultimately, all the points are drawn in a particular order and that doesn't change; it's simply about mapping which point in the destination shape to map to the very first one in the beginning shape. 

[Dipscom]

Well... If I understood it correctly, the effect that  is after is something akin to this:

 

See the Pen LbWerb?editors=1010 by dipscom (@dipscom) on CodePen

 

Having the edges morph towards the sides of the circle and the top and bottom of the "eye shape" match the top and bottom of the circle as well.

 

You will see that the circle is not really a circle, I didn't go full on recreating your shapes but it is enough to show the idea. You will also note that if you want that amount of control over the morphing, you will need some good understanding of how these shapes are formed, the order in which each point is created and a general ability to read raw SVG code.

 

MorphSVG plugin does an amazing job but unfortunately it's not magic, it will follow some set rules. In order to create magic, you might have to learn the underpinning of the rules you're trying to bend.

 

[Spoochy]

thanks everyone for helping me out on this one, i will try to develop this further and when i find an answer i will post it here in case someone else might have the same problem in the future.