framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
23.78k stars 808 forks source link

[FEATURE] Rotate SVG objects around arbitrary point on canvas #629

Closed maxsteenbergen closed 10 months ago

maxsteenbergen commented 4 years ago

I'm developing a graph of sorts with a number of spokes. These spokes originate from a concentric ring around the center of a circle and rotate along the circle as their data value changes. They're not animated yet so value updates are sudden and janky. I'm in the process of porting this (and others) to Motion but run into the limitation that Motion doesn't allow setting a transform origin with "global" coordinates or by referring to some other element but only with reference to the element's own bounding box.

For example, I have a line with coordinates x1={50} y1={10} x2={50} y2={40} inside of a circle with radius r={50}. I want this line to rotate around the center of the circle, so the x={50} y={50} point. However, since Motion only takes 0..1 as originX/originY values referring to the line's own bounding box, I have to do some calculation just how far the pivot point extends beyond the line, keeping in mind the actual length of the line at that time. This simplified example would result in a originY of about 1.2 which isn't overly complex but there are other cases in my graph that would become a lot more involved

It would be so much more flexible if I could set actual coordinates as the originX/originY values, especially on large scale SVG canvases. More broadly speaking, for regular DOM elements you could consider passing the position of some other arbitrary DOM element as well.

rjw25 commented 10 months ago

Max what did you end up with?

mattgperry commented 10 months ago

Closing as wontfix to set expectations.

It's still possible this could be implemented, but it's unlikely to happen unless we need the functionality inside Framer.