Animation weight problem threejs

Hello everyone, I am trying to play the animation in three.js, in the first animation my character is walking forward on the Z axis, then in the second animation i make him to turn right, and if I play the first animation, I expect it to walk in X axis but my character is moving in between Z and X axis, as shown in the video below, can anyone help me with this

Your animation contains location data ? Theres an error in your code ?

If you want a single animation action to be the active one, you have to reduce the weight of all other actions… otherwise they add together.

Yes, I reviewed my animation, and both sequences include location data. Could this be a potential explanation for why the character moves between the Z and X axes instead of along the X-axis exclusively?

When I reduce the weight of the ‘turn right’ animation, the character resumes walking forward along the Z-axis. However, my intention is for the character to move exclusively along the X-axis after executing a right turn. How can I achieve this?

That… is more complicated.

I think in that case you need to extract the X,Z motion from the top / root bone in the hierarchy and apply it to your character movement instead of the bone. This bone is usually the Hip bone in humanoid characters. You’ll have to edit the animations in code to remove the effect of hip animation… or, manually undo the hip animation per frame, and then apply it to your movement simulator.

There may be something clever you can do with three.js docs
But I don’t know…

But hopefully you can understand why this doesn’t just work out of the box.

Here’s some info about similar concepts in Unreal engine:

Root Motion in Unreal Engine | Unreal Engine 5.0 Documentation.