Jump to content
Search Community

Issues with SVG transformOrigins

JarethB test
Moderator Tag

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.



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


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.
  • Create New...