Computing the "center" of a group based on a child

[thedamon]

I made a codepen to demo my issue and ended up solving it

 

function originFromChild(container, center){
  const centerBox = center.getBBox();
  const box = container.getBBox();
  
  // get absolute center;
  const centerX = centerBox.x + (centerBox.width / 2);
  const centerY = centerBox.y + (centerBox.height / 2);
  
  // then determine relative to container.
  return ((centerX - box.x) / (box.width))*100 + '% '+
    ((centerY - box.y) / (box.height))*100 + '%';
}

// Usage
const tOrigin = originFromChild(document.getElementById('sun'), document.getElementById('sun-center'));
console.log(tOrigin);

TweenMax.to('#sun', 6, {rotation:"360", ease:Linear.easeNone, repeat:-1, transformOrigin: tOrigin});

 

The question then becomes.. is this a good approach? and is there anything already built in to do this? (also makes me wonder about other utilities I might not want to miss out on)

 

I'm completely new to GSAP and the first thing I tried to do turned out to be more complicated then I had bargained for haha.

See the Pen LYERrRL by thedamon (@thedamon) on CodePen

[GreenSock]

First of all, welcome to GSAP and the forums!

 

I certainly respect the effort...but you could solve it in one line with GSAP's svgOrigin feature

See the Pen 758dba69c33dfe9b1b64db955d4fa65e?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I got those x/y values from the #sun-center element's cx/cy attributes. You could easily pull those in dynamically if you prefer. 

 

svgOrigin lets you set absolute/global coordinates in the SVG whereas transformOrigin is relative to the top/left corner of the element's bounding box. So you've got a lot of flexibility - choose whichever is more convenient for you. 

 

Does that help?

 

 

[thedamon]

That definitely looks a few steps easier.. that's what I was hoping for!

 

I had read about svgOrigin but avoided it I think because i only wanted to rotate one part of a complex svg.. but yeah since svgOrigin is set per tween .. that's not actually an issue

 

Thanks!