# How to blend FBX animations

**URL:** <https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378>\
**Category:** Questions\
**Tags:** animation\
**Created:** [December 9, 2020, 6:16am UTC](https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378 "2020-12-09T06:16:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![5PK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/5pk/32/15023_2.png) [@5PK](https://discourse.threejs.org/u/5PK)\
**Post date:** [December 9, 2020, 6:16am UTC](https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378/1 "2020-12-09T06:16:23Z")

</div>

Hey guys I’m using FBX to load in some animations. I’m having trouble blending them however. I’m simply trying to get my mixamo model from an idle animation, to walk, and back to idle upon key events.

But when I try to blend the animations, the model reverts back to a T-Pose before blending to the next animation. I’m not sure why this is happening. my play action method is below

```javascript
        this.playAction = (action, loop) => {

            var a = this.mixer.clipAction(this.anims[action]); // get request animation clip
            var b = this.mixer.clipAction(this.anims[this.curAnim]) // get cur anim clip

            this.curAnim = action;
            this.mixer.stopAllAction();
            b.weight = 0;
            a.crossFadeFrom(b, 1);
            a.weight = 1;
            a.play()

        }

```

thanks

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 9, 2020, 10:39am UTC](https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378/2 "2020-12-09T10:39:53Z")

</div>

Try it like shown below. The code performs a crossfade from idle to walk.

```javascript
const idleAction = mixer.clipAction( idleClip );
const walkAction = mixer.clipAction( walkClip );

idleAction.play();

// after two seconds, start crossfade

setTimeout( function() {

	walkAction.play();
	idleAction.crossFadeTo( walkAction, 1 );

}, 2000 );

```

Live demo: [https://jsfiddle.net/zt2wsfeb/1/](https://jsfiddle.net/zt2wsfeb/1/)

---

<div class="post-metadata">

**Author:** ![5PK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/5pk/32/15023_2.png) [@5PK](https://discourse.threejs.org/u/5PK)\
**Post date:** [December 9, 2020, 2:22pm UTC](https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378/3 "2020-12-09T14:22:05Z")

</div>

Hi, thanks for the quick reply.

This code below worked for me. I think the key for me was stopping all anims and playing both old anim, new anim + the crossfade.

```
        this.playAction = (action, loop) => {
        if(action !== this.curAnim){
            var a = this.mixer.clipAction(this.anims[action]); // get request animation clip
            var b = this.mixer.clipAction(this.anims[this.curAnim]) // get cur anim clip
            this.mixer.stopAllAction();
            this.curAnim = action;
            b.play();
            b.crossFadeTo(a, .25);
            a.play();
        }
    }
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 9, 2020, 8:29pm UTC](https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378/4 "2020-12-09T20:29:08Z")

</div>

Yeah, playing both animations was the missing bit!

---

<div class="post-metadata">

**Author:** ![simo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/simo/32/18790_2.png) [@simo](https://discourse.threejs.org/u/simo)\
**Post date:** [June 8, 2021, 5:25pm UTC](https://discourse.threejs.org/t/how-to-blend-fbx-animations/21378/5 "2021-06-08T17:25:57Z")

</div>

@Mugen87 Can you please explain how would animation **a** waits for **b** to finish?  
I am currently having some animations and I do listen to the event listener of finished animation before starting the other, but I am not sure how to use the blending at the event listener of finished animation for the previous one…

Do we still need to use event listener for animation to finish before staring the other animation incase of using blending?

As I noticed in the code above:

```javascript
b.play();
b.crossFadeTo(a, .25);
a.play();

```

without any waiting… ?

Thanks in advanced.