How to play one animation after another in 3js?

I have one animation in gltf model that I need to play once and when it finishes I need the 2nd one to play .

let previousTime = 0;
  function (gltf) {
    // Get the animations from the loaded model
    const animations = gltf.animations;

    // Create a new animation mixer
    const mixer = new THREE.AnimationMixer(gltf.scene);

    // Play the first animation
    const firstAction = mixer.clipAction(animations[6]);
    // Set the animation to only play once
    // firstAction.setLoop(THREE.LoopOnce);

    // Set the animation to stop at the end
    firstAction.clampWhenFinished = true;;

    firstAction.addEventListener( 'finished', function( e ) { 
    } )

    // Add the loaded model to the scene

    // animate the model in the render loop
    function animate(currentTime) {

      //delta time
      // calculate deltaTime
      const deltaTime = (currentTime - previousTime) / 1000;

      // update the previousTime variable for the next frame
      previousTime = currentTime;

      renderer.render(scene, camera);

  function (xhr) {
    // Callback function when the model is loading
    // console.log((xhr.loaded / * 100 + "% loaded");
  function (error) {
    // Callback function when there is an error loading the model

but I get the error “firstAction.addEventListener is not a function”. Solution anyone?

It’s AnimationMixer that has event listeners - not the action. See the example at the veeeeery bottom of the AnimationAction page.