holy-script

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. https://codepen.io/bleh-bleh-bleh/pen/VwyJWro Appreciate all the help! ?

Hiya! I've very recently discovered the awesome world of GSAP and its separately amazing plugins. Very innovative, very well thought out, and the effort of the development team just shines through. It's been a really fun ride, and I'm looking forward to continued adventures with this package! I dabbled a bit in animating sprites in the DOM elements (not canvas) and working with GSAP was a like cool breeze. When I stepped it up a notch, trying to move the animating spritesheet across the page, I used the FLIP Plugin, which totally works like magic, but through some thorough observation I came across a little bug, I believe, or it may simply be me incorrectly or incompletely using some syntax. The sprite is supposed to change containers (divs) on a click event, and while I pause and play the animation before and after dynamically moving it about, on some instances, the target element (img) obtains an extra CSS property of "transform: translate(-50%, 0%)" along with the necessary sprite animation transforms. This happens with both the original and the new container elements, and although I presume this happens because of FLIP, I am unable to figure out how or why it does and any changes I can do to alleviate it. I have attached the link to a CodePen with the basic implementation using Vue 3, and a screenshot of the error happening with the targeted element's property added. The error can be recreated by clicking the sprite a few times - I do not understand what causes it, but it does certainly happen, and one will see the animation falter when it does. Any advice or help will be much appreciated ?