# Only the last one plays the animation, I want them all to play the animations

**URL:** <https://discourse.threejs.org/t/only-the-last-one-plays-the-animation-i-want-them-all-to-play-the-animations/52821>\
**Category:** Questions\
**Tags:** animations, 8thwall, 3d-model, webgl\
**Created:** [June 14, 2023, 7:42pm UTC](https://discourse.threejs.org/t/only-the-last-one-plays-the-animation-i-want-them-all-to-play-the-animations/52821 "2023-06-14T19:42:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matheus\_Tolentino\_Variz\_de\_Castro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/matheus_tolentino_variz_de_castro/32/37230_2.png) [@Matheus\_Tolentino\_Variz\_de\_Castro](https://discourse.threejs.org/u/Matheus_Tolentino_Variz_de_Castro)\
**Post date:** [June 14, 2023, 7:42pm UTC](https://discourse.threejs.org/t/only-the-last-one-plays-the-animation-i-want-them-all-to-play-the-animations/52821/1 "2023-06-14T19:42:27Z")

</div>

My code is in the 8th platform, the code is below

```javascript

  let mixer = null

  function randomNumberInterval(a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a
  }

  const animateIn = (model, pointX, pointZ, yDegrees) => {
    model.scene.rotation.set(0.0, yDegrees, 0.0)
    model.scene.position.set(pointX, 0.0, pointZ)
    model.scene.scale.set(0.015, 0.015, 0.015)
    model.scene.traverse((child) => {
      if (child instanceof THREE.Mesh) {
        child.castShadow = true
      }
    })
    mixer = new THREE.AnimationMixer(model.scene)
    const action = mixer.clipAction(model.animations[randomNumberInterval(0, 2)])
    action.play()
    XR8.Threejs.xrScene().scene.add(model.scene)
  }

  const placeObject = (pointX, pointZ) => {
    loader.load(
      modelFile,
      (gltf) => {
        animateIn(gltf, pointX, pointZ, Math.random() * 360)
      }
    )
  }

     const clock = new THREE.Clock()
      let previousTime = 0

      const tick = () => {
        const elapsedTime = clock.getElapsedTime()
        const deltaTime = elapsedTime - previousTime
        previousTime = elapsedTime

        if (mixer != null) {
            mixer?.update(deltaTime)
        }

        renderer.render(scene, camera)

        window.requestAnimationFrame(tick)
      }

      tick()

```

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a32a4f463d4ea98236e01fdc177bd710d90fa9f.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a32a4f463d4ea98236e01fdc177bd710d90fa9f.mp4)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [June 14, 2023, 8:07pm UTC](https://discourse.threejs.org/t/only-the-last-one-plays-the-animation-i-want-them-all-to-play-the-animations/52821/2 "2023-06-14T20:07:46Z")

</div>

Your mixer is a global variable that’s being overwritten every time you place a new object, you can rather make an array of mixers, something like this…

```javascript
  let mixers = [] 

  function randomNumberInterval(a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a
  }

  const animateIn = (model, pointX, pointZ, yDegrees) => {
    model.scene.rotation.set(0.0, yDegrees, 0.0)
    model.scene.position.set(pointX, 0.0, pointZ)
    model.scene.scale.set(0.015, 0.015, 0.015)
    model.scene.traverse((child) => {
      if (child instanceof THREE.Mesh) {
        child.castShadow = true
      }
    })
    const mixer = new THREE.AnimationMixer(model.scene)
    mixers.push(mixer)
    const action = mixer.clipAction(model.animations[randomNumberInterval(0, 2)])
    action.play()
    XR8.Threejs.xrScene().scene.add(model.scene)
  }
const placeObject = (pointX, pointZ) => {
    loader.load(
      modelFile,
      (gltf) => {
        animateIn(gltf, pointX, pointZ, Math.random() * 360)
      }
)}

const clock = new THREE.Clock()
let previousTime = 0

const tick = () => {
        const elapsedTime = clock.getElapsedTime()
        const deltaTime = elapsedTime - previousTime
        previousTime = elapsedTime

        if (mixers.length) {
            mixers.forEach(m=>{
               m.update(deltaTime)
            } 
        }

   renderer.render(scene, camera)

   window.requestAnimationFrame(tick)
}

tick()

```

---

<div class="post-metadata">

**Author:** ![Matheus\_Tolentino\_Variz\_de\_Castro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/matheus_tolentino_variz_de_castro/32/37230_2.png) [@Matheus\_Tolentino\_Variz\_de\_Castro](https://discourse.threejs.org/u/Matheus_Tolentino_Variz_de_Castro)\
**Post date:** [June 14, 2023, 8:32pm UTC](https://discourse.threejs.org/t/only-the-last-one-plays-the-animation-i-want-them-all-to-play-the-animations/52821/3 "2023-06-14T20:32:33Z")

</div>

thank you very much, it worked