# Instances with animation

**URL:** <https://forum.babylonjs.com/t/instances-with-animation/25623>\
**Category:** Questions\
**Tags:** instances\
**Created:** [November 29, 2021, 7:12am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623 "2021-11-29T07:12:37Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [November 29, 2021, 7:12am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/1 "2021-11-29T07:12:37Z")

</div>

Hi,  
I tried to import a mesh with animations and created instance for it using below reference. But, the main mesh only animating, the instance mesh is not animating. How to solve this?  
[https://playground.babylonjs.com/#ZZVZUN#1](https://playground.babylonjs.com/#ZZVZUN#1)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 29, 2021, 7:22am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/2 "2021-11-29T07:22:29Z")

</div>

In Chrome I see both models animated -

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/9/e96f11f1fcc0586716649c316c3c74e20797ea22.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/9/e96f11f1fcc0586716649c316c3c74e20797ea22.mp4)

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [November 29, 2021, 8:11am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/3 "2021-11-29T08:11:54Z")

</div>

Thanks For your reply @labris . I couldn’t see this models in my browser(Chrome). In my browser ,there is the plane only.  
Any other references for import meshes and instancing that with animations.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 29, 2021, 9:24am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/4 "2021-11-29T09:24:18Z")

</div>

It’s working on my mobile phone as well. Chrome.

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [November 29, 2021, 9:28am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/5 "2021-11-29T09:28:22Z")

</div>

yes, In mobile, it is working fine. But why not on desktop.

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [November 29, 2021, 9:38am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/6 "2021-11-29T09:38:52Z")

</div>

Oh. It is just because of the firewall settings. Now only I am seeing the error in my console.  
And I am using this same script in my project as well, I am sharing script below. In that, the model is loaded. the instances also created . But the animation happens only on the actual mesh. not on instances.

```auto
BABYLON.SceneLoader.ImportMesh(
    '',
    'assets/models/',
    'Hotspot Light.glb',
    scene2,
    function (meshes, particleSystems, skeletons, animationGroups) {
      animationGroups[0].start(true);
      animationGroups[1].start(true);
      animationGroups[2].start(true);
      let inst = createInst(meshes[0],1,0.05, -1,animationGroups);
      let inst2 = createInst(meshes[0],1,0.05, -1.4,animationGroups);
      let inst3 = createInst(meshes[0],0.5,0.05, -1.45,animationGroups);
      let inst4 = createInst(meshes[0],0.85,0.05, -1.8,animationGroups);
      let inst5 = createInst(meshes[0],-0.22,0.3, -0.5,animationGroups);
      meshes.forEach((mesh) => {
        if (mesh.material) {
          mesh.actionManager = action_manager_mesh;    
          assign_material_scene2(mesh);         
        }
      });
    }
  );

  function createInst(mesh:any, x:any, y:any,z:any,animations:any){
    let instRoot = new BABYLON.TransformNode("instRoot", scene2);
    for (let i = 0; i < mesh.getChildren().length; i++) {
        let bodyPart = new BABYLON.TransformNode("bodyPart", scene2);
        bodyPart.parent = instRoot;
        bodyPart.position = mesh.getChildren()[i].position;

        for (let j = 0; j < mesh.getChildren()[i].getChildren().length; j++) {

            let bodyPartInst = mesh.getChildren()[i].getChildren()[j].createInstance("bodyPartInst");
            bodyPartInst.actionManager = action_manager_mesh;
            if(i>0) bodyPart.animations.push(mesh.getChildren()[i].animations[j]);
            bodyPartInst.parent = bodyPart;
        }
        if(i>0){
          scene2.beginAnimation(bodyPart, 0, 100, true);            
        } 
    }
    instRoot.scaling = new BABYLON.Vector3(0.01,0.01,0.01);
    instRoot.position.x += x;
    instRoot.position.z += z;
    instRoot.position.y+=y;
    return instRoot;
  }

```

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 29, 2021, 11:01am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/7 "2021-11-29T11:01:42Z")

</div>

Try to search for ‘instances animation’ on the forum. It yields in 50+ results. I bet you will find a solution. If not, come back. 🕶

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 29, 2021, 12:39pm UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/8 "2021-11-29T12:39:13Z")

</div>

Do you see animations in these examples - [https://playground.babylonjs.com/#AJA5J6#77](https://playground.babylonjs.com/#AJA5J6#77) and [https://playground.babylonjs.com/#AJA5J6#80](https://playground.babylonjs.com/#AJA5J6#80) ?

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [November 30, 2021, 4:44am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/9 "2021-11-30T04:44:08Z")

</div>

Thanks for your references @labris . I tried with the second one [https://playground.babylonjs.com/#AJA5J6#80](https://playground.babylonjs.com/#AJA5J6#80) .

But it throws an error while calling createInstance() . I have given below the error message.

> Property ‘createInstance’ does not exist on type ‘AbstractMesh’.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 30, 2021, 4:54am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/10 "2021-11-30T04:54:40Z")

</div>

Which browser do you use? Also, make sure that PG is latest version.  
I have no problems with this PG - [https://playground.babylonjs.com/#AJA5J6#80](https://playground.babylonjs.com/#AJA5J6#80) - in Chrome latest.  
They all are running 🙂

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/c/acc42381147cfe65296dd65199119f0fd2b3f9f4.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/c/acc42381147cfe65296dd65199119f0fd2b3f9f4.mp4)

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [November 30, 2021, 5:17am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/11 "2021-11-30T05:17:12Z")

</div>

Oh. Sorry @labris . I didn’t mean the issue is in playground, I am facing the issue while using this code in my project. That is actually an angular project. So I am writing this within the .ts

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 30, 2021, 5:26am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/12 "2021-11-30T05:26:11Z")

</div>

> [@jayakannan](#):
>
> Property ‘createInstance’ does not exist on type ‘AbstractMesh’.

And this is completely true, there is no such property - [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/babylon.abstractmesh)  
So it seems you need to import { Mesh } which has such property - [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/babylon.mesh#createinstance)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [December 28, 2021, 10:06am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/13 "2021-12-28T10:06:44Z")

</div>

Hi @jayakannan just checkin in, do you have any more questions? 🙂

---

<div class="post-metadata">

**Author:** ![jayakannan](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@jayakannan](https://forum.babylonjs.com/u/jayakannan)\
**Post date:** [December 28, 2021, 10:07am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/14 "2021-12-28T10:07:42Z")

</div>

No @carolhmj . I am not having related to this now.

---

<div class="post-metadata">

**Author:** ![Rubaka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubaka/32/8086_2.png) [@Rubaka](https://forum.babylonjs.com/u/Rubaka)\
**Post date:** [September 28, 2024, 8:02pm UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/15 "2024-09-28T20:02:15Z")

</div>

Hi there!

I’m exporting a scene from Blender that contains several objects as instances. Each instance has an animation (which also seems to be an instance). The animation involves rotation and tilting around the Z-axis. However, when I run the scene in BabylonJS, all instances move to the same position, as if they are animated as a single object.

I see the same issue in the example provided by @labris above. If I switch versions in the Playground, I can see that in version 4 it worked correctly. Currently, I’m trying to find a workaround by cloning and modifying animations before starting them, but it feels quite complicated and messy.

Is there a simpler way to make instances use their own coordinates for the animation? I’d appreciate any help!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 28, 2024, 8:25pm UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/16 "2024-09-28T20:25:36Z")

</div>

Hey @rubaka!

It would be cool if you could move your question to a new topic and reference the current one.  
Thanks!

---

<div class="post-metadata">

**Author:** ![Rubaka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubaka/32/8086_2.png) [@Rubaka](https://forum.babylonjs.com/u/Rubaka)\
**Post date:** [September 28, 2024, 8:33pm UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/17 "2024-09-28T20:33:01Z")

</div>

Hello! Sure, no problem. But I would like to understand why it’s not possible to continue this topic. It seems that my question doesn’t significantly deviate from it, and this topic is not closed. I’m not arguing, I just want to understand, otherwise, I won’t remember and will continue the discussion in the old topic somewhere else. That’s just how my mind works 🙂

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 28, 2024, 8:45pm UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/18 "2024-09-28T20:45:52Z")

</div>

> [@Rubaka](#):
>
> and this topic is not closed.

It’s solved.

If you open a new one and we find out that you are exeperiencing a bug

> [@Rubaka](#):
>
> I can see that in version 4 it worked correctly.

you/we can move the new topic to the Bugs category easily.

I’m not arguing, leave it as is if you feel so.

---

<div class="post-metadata">

**Author:** ![Rubaka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubaka/32/8086_2.png) [@Rubaka](https://forum.babylonjs.com/u/Rubaka)\
**Post date:** [September 29, 2024, 12:05am UTC](https://forum.babylonjs.com/t/instances-with-animation/25623/19 "2024-09-29T00:05:52Z")

</div>

In my case, I solved the problem by assigning a parent object (which I hide) to the animated instance. Now the instance starts the animation from zero along all axes, and I can move the parent element wherever I want without affecting the child’s animation and vice versa.

I hope this is not a bug, and the topic doesn’t require further attention. Happy development to everyone!
