Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JarethB

Issues with SVG transformOrigins

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 by JarethB
Altered Codepen, also horizontal & vertical issue
Link to comment
Share on other sites

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?

 

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×