thedamon Posted December 15, 2019 Share Posted December 15, 2019 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 Link to comment Share on other sites More sharing options...
GreenSock Posted December 15, 2019 Share Posted December 15, 2019 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? 3 Link to comment Share on other sites More sharing options...
thedamon Posted December 15, 2019 Author Share Posted December 15, 2019 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now