When rotating and morphing, the SVG moves slightly

[stompeers]

Hi there!

 

When I am morphing and rotating an SVG, it will move slightly to the right. I assume this is because the "50% 50%" origin on each is slightly different. But, how do I always move it back to the original location?

 

Thank you!

Chris

[Carl]

Hi Chris,

 

Welcome to the GreenSock forums. 

 

It would really help if we could see this happening. Please visit this CodePen demo and replace the code with your SVG and JavaScript.

 

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

 

That demo already has TweenMax and MorphSVGPlugin loaded.

Just hit the "fork" button to make your own copy, save it when you are done and then reply here with the link.

 

The simpler the example the better. 

 

Thanks,

 

Carl

[Carl]

Also, if you need to change the transformOrigin you can do that as well:

TweenLite.to("rect", 1, {rotation:360, transformOrigin:"80px 25px"});

Read about transformOrigin and svgOrigin here:

http://greensock.com/svg-tips