How to fix this animation group problem?

OK here is the problem. I am making a first person shooting animation. I want to stop the animation loop when the user stops firing. So I end the animation when the user lifts the mouse button up. But that not only stops the fire animation but it will stop the reload animation too. So if you left click while you are reloading then the reload animation stops. Here is the playground for that:

Click to shoot.
R to reload.

How can I fix this problem?

That is because you have all your animations in one single animation group:

So stopping animation group 0 will stop all of them

I suggest you create 2 animation groups: one for the shoot, one for the reload

How would I do that?
I tried this:

scene.animationGroups[1].start(false, 0.65, 0.265, 2.177);

as you can see here:

But it does not work.

Because you have only one animation group

You need to change the source file so that all the animations are not packaged into one single animation group

Is that hard to do?
My scene file is here: Guns-for-BJS-FPS-Game/scene.gltf at main · lando19/Guns-for-BJS-FPS-Game · GitHub
When I look at that glTF file I have no idea what in the world to do xD.

You are not the creator of the file? The yes it will be hard:)

You can manually create two new animation groups and add the individual animations in them

Can you think on an easier way of doing this?

Man:) you have options here:

  • you update the source scene (but you cannot apparently)
  • you create 2 new animation groups (I shared the doc page explaining how to do it) and simply move the animations from the group you currently have to the two new you created. This is the easiest one I can think of

Animation groups aren’t that hard to grasp once you know how they operate.

Maybe this will help:

The docs is only talking about animations for meshes you make, how would I do that for models that I load?

Just create two animation groups and add animations in it. Animations are in the group you have already

OK I have this:

var animationGroup2 = new BABYLON.AnimationGroup("Group2");

But I don’t understand how to make the other parameter
I can’t just put the in animation like this:

animationGroup2.addTargetedAnimation(g.createAnimationRange("shoot", 1.0, 0, 0.154), g);

So I guess you need to step back a bit here.
The goal is to get 2 animation groups so you can control them independently. Are we on the same page here?

So far you only have one with several targeted animations (ie. animations animating a specific target). These animations are on your main animation group, inside group.targetedAnimations.

your task is to go through this list and dispatch the targeted animations to one of the two animation groups you created. The dispatch has to be manual (you have to test it) as you want to separate animations for the shoot and animations for the reload.

Also please refrain to open multiple threads for the same question: How to make an animation to put in a new group? - Questions - Babylon.js