Help with animation bug

The animation clips are dynamically created based on some state. You can see an example in another question I opened: As animations go faster there is increasing error in accuracy

Here’s one section where i’m creating the animations:

  for (let child of [...readGroups.children].reverse()) {

    console.log(child.name, child.position.z, readGroups.position.z)

    cb('testing ' + child.name)
    await asyncAnimate([
      new THREE.NumberKeyframeTrack(readGroups.uuid + '.position[z]', [0, SPEED], [readGroups.position.z, - child.position.z + 150])
    ])

    if (child.name == state.read) {
      cb('match! moving down')
      await asyncAnimate([
        new THREE.NumberKeyframeTrack(child.uuid + '.position[y]', [0, SPEED], [child.position.y, child.position.y - 150])
      ])
      readChild = child
      scene.remove(readClone)
      break
    } else {
      await asyncAnimate([
        new THREE.NumberKeyframeTrack(child.uuid + '.position[y]', [0, SPEED], [child.position.y, child.position.y - 30])
      ])
      await asyncAnimate([
        new THREE.NumberKeyframeTrack(child.uuid + '.position[y]', [0, SPEED], [child.position.y, child.position.y + 30])
      ])
      cb('no match moving...')
    }
  }

will probably be helpful to throw in the asyncAnimate function too:

function asyncAnimate(tracks) {
    return new Promise((resolve, reject) => {
      let clip =  new THREE.AnimationClip(null, SPEED, [...tracks])
      let clipAction = mixer.clipAction(clip)
      clipAction.setLoop(THREE.LoopOnce)
      clipAction.clampWhenFinished = true
      clipAction.play()

      function res() {
        mixer.removeEventListener('finished', res)
        mixer.stopAllAction()
        resolve()
      }
      mixer.addEventListener('finished', res)
    })
  }