How to observe css tranformations?

[reactone]

I can use useResizeObserver and useMutationObserver to track changes in rotation of an element, but it doesnt work with other css transformations such as translations or scale. Im trying to update the moveable blue outline when I apply scale and translations but it stays in a fixed place:

transform: rotate(-31.24deg) scale(1.95172) translateX(78.9642px) translateY(78.9642px) Is there a way to do this? @daybrush

[daybrush]

@reactone

Is it possible to drag in the transform state?

Is it the same result even if you drag?

[reactone]

The "tracking" works fine when dragging, rotating and scalling in place. But if I add animations - translations and scalling through the transform css property it stops updating. See the video below. Any ideas how this could be implemented? @daybrush

https://github.com/daybrush/moveable/assets/48355087/8cef5180-6be6-432d-9c2f-1c6765846022

[daybrush]

@reactone

sorry. Moveable uses ResizeObserver and MutationObserver, but I know that there is no API that detects the location like the video above. If you know the API let me know.

[jeypc]

@reactone

did you find a solution? I'v spent 2 days looking for a solution but no luck

[reactone]

@reactone

did you find a solution? I'v spent 2 days looking for a solution but no luck

@jeypc Not really, I ended up hiding the outline when playing the animation. I guess it’s possible to apply the same set of transformations to the outline but not sure if worth the effort. But if you manage to find a solution, let me know!