Jump to content
GreenSock

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

Transform origin trouble

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:

https://greensock.com/gsap-1-16

 

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.
×