# How to trigger a .glb animation (animation mixer) at the same time as an A-frame animation property animation?

**URL:** https://forum.8thwall.com/t/how-to-trigger-a-glb-animation-animation-mixer-at-the-same-time-as-an-a-frame-animation-property-animation/1048
**Category:** Technical Support
**Created:** [April 10, 2024, 4:25am UTC](https://forum.8thwall.com/t/how-to-trigger-a-glb-animation-animation-mixer-at-the-same-time-as-an-a-frame-animation-property-animation/1048 "2024-04-10T04:25:49Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Nigel\_Meml](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/nigel_meml/32/185_2.png) [@Nigel\_Meml](https://forum.8thwall.com/u/Nigel_Meml)
#### Post date: [April 10, 2024, 4:25am UTC](https://forum.8thwall.com/t/how-to-trigger-a-glb-animation-animation-mixer-at-the-same-time-as-an-a-frame-animation-property-animation/1048/1 "2024-04-10T04:25:49Z")

</div>

I have three animations I want to play:

- `Walking` animation that is baked into the .glb model. I play it using A-frame’s animation mixer.
- Animate position and scale from an event called `walk-in`. They’re both properties of the A-frame’s `a-entity`.

Is there a way where I can play both simultaneously? Or will I need to bake in an animation that does all three at once?

* * *

Here is the simplified A-frame entity code:

```auto
<a-entity
      gltf-model="#peacock-glb"
      position="5 0.17 -5"
      scale="0.01 0.01 0.01"
      id="peacock-entity"
      animation__position="property: position; to: 0.2 0.6 4.5; delay:1500; dur: 4500; startEvents: walk-in"
      animation__scale="property: scale; to: 0.05 0.05 0.05; delay:1500; dur: 4500; startEvents: walk-in">
</a-entity>

```

Here is the javascript code where I try to trigger the animation property and the animation mixer animation called `Walking`. It seems to play `Walking` first, then plays the two animation properties for the `walk-in` event.

_Edit:_ I also tried removing the delay, but that seems to have the animation property override the `Walking` animation-mixer animation entirely.

```auto
this.el.emit('walk-in', null, false)
this.el.setAttribute('animation-mixer', 'clip:Walking')

```

---

<div class="post-metadata">

### Author: ![Joao\_Pratas](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@Joao\_Pratas](https://forum.8thwall.com/u/Joao_Pratas)
#### Post date: [April 10, 2024, 11:03am UTC](https://forum.8thwall.com/t/how-to-trigger-a-glb-animation-animation-mixer-at-the-same-time-as-an-a-frame-animation-property-animation/1048/2 "2024-04-10T11:03:21Z")

</div>

Hi @Nigel_Meml .

This is certainly possible, however I suggest adding in the entity animation properties at the same time as you add the animation baked into the glb file.

as far as events go, you could do something like this:

```auto
this.el.sceneEl.addEventListener('walk-in', () => {
    this.el.setAttribute('animation__position', {
        property: 'position',
        to: '0.2 0.6 4.5',
        dur: 1500, //duration of the animation in miliseconds
        loop: true // you can change this value to 'false' if you don't want it to loop or set this as a number and it will play the animation as many times as you'd like
    })

    this.el.setAttribute('animation__scale', {
        property: 'scale',
        to: '0.05 0.05 0.05',
        dur: 1500, //duration of the animation in miliseconds
        loop: true // you can change this value to 'false' if you don't want it to loop or set this as a number and it will play the animation as many times as you'd like
    })

    this.el.setAttribute('animation-mixer', {
        clip: 'Walking',
        loop: 'repeat' // you can set this value to 'once' or set a number to iterate the animation as many times as you'd like
    })
})

```

and you can trigger it like so:

```auto
this.el.sceneEl.emit('walk-in')

```

Hope this helps 🙂