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

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


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-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 entity code:

<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.

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