svg Issues with SVG transformOrigins

[JarethB]

Greetings GSAP community,

 

I'm having some trouble getting an SVG origin to center. Please see the Codepen, there is not much else to explain.

 

Thanks in advance for any help.

 

~Jareth

See the Pen LjJEpB by anon (@anon) on CodePen.

Edited August 25, 2017 by JarethB
Altered Codepen, also horizontal & vertical issue

[OSUblake]

Hi @JarethB

 

Origin does not affect translation (x and y). What part of the ship do you want x and y to control, e.g. the top-left corner, its center? And what should the ship rotate around? Its own center, the center of the svg, etc?

 

[JarethB]

Hi @OSUblake

 

Thanks for your reply. Ideally I'd like it to rotate on the cockpit area of the ship and be centered in the middle of the parent svg.

 

Thanks

[OSUblake]

Hi @JarethB

 

You didn't say what part of the ship x and y should control, but if you want it at the same point it rotates, the easiest thing to do would be to set the transform origin and xPercent/yPercent to the same values.

 

TweenLite.set(ship, {
  transformOrigin: "50% 65%",
  xPercent: -50,
  yPercent: -65
});

 

Is this what you were going after?

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

 

[JarethB]

Hi @OSUblake

 

This is great! Thanks a lot for your help!