Aptly put points, and I'm really thankful for the insights - couldn't have gotten to the solution without them.
Firstly, the DOM manipulation was plain wrong. I saw to it and switched that method out with the Vue 3 Teleport Component. This rabbit hole went deep, though. Turns out, with Template, I could generalize the movement locations in the DOM, have more than one, and swapping them out became plain easy. However, FLIP no longer worked as expected.
Secondly, the issue did turn out to be because of conflicting transforms on the sprite, so I took your advice and started moving about the whole container instead - and voilà! No more faltering animations. But, like I said FLIP didn't work now, and I couldn't figure out why at first. Had to take a deep dive in the Vue 3 docs and the source code to find out how differently it worked than my previous rudimentary approach.
Turns out, the only thing that matters is that DOM's changes like this through the framework are asynchronous - I noticed this when I set the FLIP target to spin and move, along with an experimental setTimeout call to FLIP, which worked, but wasn't reliable. In the end, all I had to do was add the FLIP animation as a callback through Vue's update lifecycle method and a this.$nextTick call, which implemented FLIP after the element was moved.
I'm glad to say everything now works as expected, is definitely scalable and follows conventions. Plus, I learned a bunch of new stuff!
Here's a CodePen for my final demonstration.
See the Pen VwyJWro by bleh-bleh-bleh (@bleh-bleh-bleh) on CodePen
