Jump to content


Transform origin trouble

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

I'm trying to rotate this robot arm around its shoulder. Id like to have the purple circle stay in one place and for the arm to rotate around its center, but I cant get it to work.


See the Pen pVqrjj?editors=1010 by puffywuffer (@puffywuffer) on CodePen


Link to comment
Share on other sites

Hi @puffywuffer :)


Please try this on line 34:


.to(arm, 1, {rotation: 30, svgOrigin: '225.6 300.1'}, '-=1')


Then remove the arm transformOrigin on lines 40 and 50 as you 'll only have to set it in that first tween.


More info about svgOrigin:



Happy tweening.




  • Like 3
Link to comment
Share on other sites

Was typing this when @PointC replied :) Beat me to it.


You could do it programmatically using the getBBox() method of SVG elements to calculate the center and feed that into the svgOrigin. I noticed that circle has a class of .st10 (and it's the only thing with that), so it'd be:

var bounds = document.querySelector(".st10").getBBox(),
    originX = bounds.x + (bounds.width / 2),
    originY = bounds.y + (bounds.height / 2);
TweenLite.set(arm, {svgOrigin: originX + " " + originY});


Here's a fork: 

See the Pen db6accebe127acec6e3b3ee68c4dc338 by GreenSock (@GreenSock) on CodePen


Note that once you set an svgOrigin or transformOrigin, you don't have to keep setting it in every tween for that same element. GSAP remembers :)


Does that help? 

  • Like 3
Link to comment
Share on other sites

Sorry about that. It wan't indicating claimed when I started typing. I'll probably lose my mod badge for jumping the line on the boss. :ph34r: 

Link to comment
Share on other sites

Your punishment: minus 50 likes, and you must rebuild that entire animation using only CSS. Good luck. 



  • Like 1
  • Haha 3
Link to comment
Share on other sites

Wow! Thanks a lot  - svg origin is great! :-P

This was very helpful.

  • Like 1
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.