Transform origin trouble

[puffywuffer 8 Likes (Newbie)]

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

 

[PointC 14,429 Likes (Superhero)]

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.

 

 

[GreenSock 18,597 Likes (Superhero)]

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? 

[PointC 14,429 Likes (Superhero)]

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.  

[GreenSock 18,597 Likes (Superhero)]

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

 

 

[puffywuffer 8 Likes (Newbie)]

Wow! Thanks a lot  - svg origin is great!

This was very helpful.