JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>

	<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

	<script src="https://threejs.org/examples/js/WebGL.js"></script>
	<script src="https://threejs.org/examples/js/utils/SkeletonUtils.js"></script>
      <div id="loading">
        <div>
          <div>...loading...</div>
          <div class="progress"><div id="progressbar"></div></div>
        </div>
      </div>

JavaScript

let mixer,animations = new Map();
class Player {
    constructor( scene, model ){
        this.model = model.scene;
        this.model.traverse( function ( object ) {
            if ( object.isMesh ) object.castShadow = true;
        });
        scene.add( this.model );  
        
        mixer = new THREE.AnimationMixer( model.scene );
        
        for ( let i = 0; i < model.animations.length; ++i  ) {
        let clip = model.animations[ i ];
            let action = mixer.clipAction( clip ); 
            action.loop = THREE.LoopOnce;
            action.name = clip.name;
            animations.set(action.name, action);  
      }
 
    }
    update(dt){
        prepareCrossFade(animations.get("Walk"), animations.get("Idle"), 1.0 );
		mixer.update( dt ); 
    }



};

function prepareCrossFade( startAction, endAction, defaultDuration ) {
    var duration = defaultDuration;
    if ( startAction === animations.get("Idle") ) {
        executeCrossFade( startAction, endAction, duration );
    } else {
        synchronizeCrossFade( startAction, endAction, duration );
    }
}

function synchronizeCrossFade(startAction, endAction, duration ) {

// not working
    mixer.addEventListener( 'loop', onLoopFinished );
    console.log(mixer);
    function onLoopFinished( event ) {
        if ( event.action === startAction ) {
            mixer.removeEventListener( 'loop', onLoopFinished );
            executeCrossFade( startAction, endAction, duration );
        }
    }

}

function executeCrossFade( startAction, endAction, duration ) {

    setWeight( endAction, 1 );
    endAction.time = 0;
    startAction.crossFadeTo( endAction, duration, true );
}

function setWeight( action, weight ) {
    action.enabled = true;
    action.setEffectiveTimeScale( 1 );
    action.setEffectiveWeight( weight );
}

function unPauseAllActions(actions) {
    actions.forEach( function ( action ) {
        action.paused = false;
    });

}


const manager = new...