[morphSVG change default circle anchor point]

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.

[morphSVG change default circle anchor point]

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

[morphSVG change default circle anchor point]

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