Animation crossFade stops working

Questions
1

Hi,

How to properly make an animation cross fading between two clips?
The code I have (shortened):

const animationList = {};
const avatarList = {};
let mixer, activeAction, activeAvatar;

// Loading avatars from several GLTF files and pushing them into the avatarList object
// Loading animations from several GLTF files and pushing them into the animationList object

const gui = new GUI();
gui.add(
        params,
        'animation',
        Object.keys(animationList)
      )
        .name('Animation')
        .onChange(animation => {
          // in case of I don't have an active animation
          if (!activeAction) {
            mixer = new THREE.AnimationMixer(avatarList[activeAvatar].scene);
            let clip = mixer.clipAction(animationList[animation]);
            clip.play();
            activeAction = clip;
          } else { // I do have an active animation and want to make a crossFade to the next one
            mixer = new THREE.AnimationMixer(avatarList[activeAvatar].scene);
            let clip = mixer.clipAction(animationList[animation]);

            activeAction.crossFadeTo(clip);
            activeAction = clip;
          }
        })
        .listen();

This code works when you pick any animation for the first time, but if you select another animation the previous animation just stops and nothing happens. The console is also clean.

2

You may need to reset the clips. See:

1 Like
3

Thank you!