Combining .request calls on draggable and rotatable results in shifting position

[oasjohn]

In brief, I'm using JS to reposition and rotate an element incrementally over time, and want the element to rotate about its natural center and reposition relative to its original position. If I do this using the .request calls in this order, the location is shifted relative to the rotated element. (mv is the moveable instance)

newAngle increases over time
newX and newY change over time

mv.request('rotatable', { rotate: newAngle }, true)
mv.request('draggable', { x: newX, y: newY }, true)

If I reverse the operations, it also results in the incorrect position.

mv.request('draggable', { x: newX, y: newY }, true)
mv.request('rotatable', { rotate: newAngle }, true)

I've found that I can effectively separate these operations by resetting rotation to zero, set the new position, then apply the new rotation.

mv.request('rotatable', { rotate: 0 }, true)
mv.request('draggable', { x: newX, y: newY }, true)
mv.request('rotatable', { rotate: newAngle }, true)

However, the position seems to shift after several iterations. This happens even if the newX and newY remain static. Simply calling the draggable request seems to introduce some calculation errors internally over time.

Has anyone seen this or is there a better way to implement these actions?

[oasjohn]

Here is how things progress over time:

Things are OK at first...

After about 50 iterations...things are starting to shift slightly...

After about 200 iterations...going off the rails...