# Loading animations on different GLTF models in scene

**URL:** https://discourse.threejs.org/t/loading-animations-on-different-gltf-models-in-scene/44429
**Category:** Questions
**Tags:** loaders, animation
**Created:** [November 7, 2022, 2:20pm UTC](https://discourse.threejs.org/t/loading-animations-on-different-gltf-models-in-scene/44429 "2022-11-07T14:20:03Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://discourse.threejs.org/u/Jeroen)
#### Post date: [November 7, 2022, 2:20pm UTC](https://discourse.threejs.org/t/loading-animations-on-different-gltf-models-in-scene/44429/1 "2022-11-07T14:20:04Z")

</div>

Hello all, I’m trying to load and play a few different animations that my models contain but can’t get it to work, I either get one animation to work or non at all. Following this example: [Animation system – three.js docs (threejs.org)](https://threejs.org/docs/?fbclid=IwAR3fEkfMNomjaygJhqfbuc3ayBWwoSSgwkzjSxfROwlJSvkg54WmyhOm8uY#manual/en/introduction/Animation-system)

This is what I have

```javascript
loadModelFile = (fileName, path) => {
    return new Promise((resolve) => {
      let dracoLoader = new THREE.DRACOLoader();
      dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/');
      let loader = new THREE.GLTFLoader();

      loader.setDRACOLoader(dracoLoader);

      loader.load(`${path}${fileName}`, (gltf) => {
        console.info("GLTF file load complete");
        
        const model = gltf.scene;
        scene.add(model);
        model.scale.set(0.75, 0.75, 0.75);
     		model.position.set(0, 0.2, 0);
     		model.rotation.set(0, -0.2, 0);
        
                 model.traverse((o) => {
          if (o.isMesh) {
            o.castShadow = true;
            o.receiveShadow = true;
            o.frustumCulled = false;
          }
        });
         
        const mixer = new THREE.AnimationMixer(model);
        const clips = model.animations;
                   clips.forEach(function(clip) {
                     mixer.clipAction(clip).play();

                   });

function animate(){
  requestAnimationFrame( animate );
  
  delta = clock.getDelta();
  
  	if ( mixer ) mixer.update( delta );
 

```

If any one can point out what I’m doing wrong I would be very grateful.

Thanks in advance!

---

<div class="post-metadata">

### Author: ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)
#### Post date: [November 8, 2022, 12:57pm UTC](https://discourse.threejs.org/t/loading-animations-on-different-gltf-models-in-scene/44429/2 "2022-11-08T12:57:27Z")

</div>

maybe a possible issue: (it’s just a guess)  
you try to manage animations of multiple meshes using a single mixer.  
I recommend to use separate mixers, something like.

```javascript
myMixers[i].new THREE.AnimationMixer(model);

```

and using some loop in the renderer:

```javascript
for (let i in myMixers){ myMixers[i].update( delta ); }

```

---

<div class="post-metadata">

### Author: ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://discourse.threejs.org/u/Jeroen)
#### Post date: [November 14, 2022, 11:52am UTC](https://discourse.threejs.org/t/loading-animations-on-different-gltf-models-in-scene/44429/3 "2022-11-14T11:52:05Z")

</div>

Thank you for your answer, I ended up just adding all the different meshes and animations in one gltf file and that solved my problem.

---

<div class="post-metadata">

### Author: ![Zbigniew\_Jarzynski](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zbigniew_jarzynski/32/31073_2.png) [@Zbigniew\_Jarzynski](https://discourse.threejs.org/u/Zbigniew_Jarzynski)
#### Post date: [November 14, 2022, 11:03pm UTC](https://discourse.threejs.org/t/loading-animations-on-different-gltf-models-in-scene/44429/4 "2022-11-14T23:03:20Z")

</div>

I think you are creating mixer and animation actions after loader.load() function instead of doing it inside (gltf)=\>{} function.

So if model gets loaded fast mixer is created on this model. If it loads slowly, the loader.load() exists and you create mixer on empty model. That is why somtimes it works and sometimes not.

(gltf)=\>{} is called after model is loaded, not immediately after lader.load() exits.

Put you mixer and actions code:  
(gltf)=\>{ /\* here \*/ }
