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

🧑‍💻 Technical Support
1

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:

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

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

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:

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:

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

Hope this helps :slight_smile: