I was considering asking this in the Game Engine Development thread, but I'm not really sure.
I am trying to animate an SVG in my browser (I'm using gsap for the animation).

I have two frames, one with the characters leg down and another where I have taken the exact same image and moved the leg.
I did not remove or add any nodes, I've only moved them.
My intention is to have the same nodes from one path move to their "new" positions in frame 2, where the a node from frame 1 goes to "itself" in frame 2.
I have attached a webm which shows the problem. Rather than align the same nodes from frame 1 to the same nodes in frame 2, gsap seems to try and "solve" by itself.

I have attempted 3 solutions:
1. I iterated through all paths in the SVG using gsap.to with the morphSVG extension (the attached webm)
2. I did the same as the first but without morphSVG by setting the d= parameter directly (it was considerably worse)
3. I set up an <animate> parameter inside the <path> of a simple SVG. With very small changes to a single layer this seems to work but often the animation fails and it just instantly switches between frame 1 and 2 at the half-way point in transition time.

I've tried searching for the answer online, and querying LLMs but I find difficulty in even explaining the problem. The image seems to start at frame 1, disassociate, then gradually reform into frame 2.

Even if someone doesn't know the solution, does anyone know how I can even explain to an LLM or search engine what the problem is?
Maybe someone knows what's causing it in the first place?

Any help would be greatly appreciated, thanks.