Error while making all three animations start at the same time and stop them one after another with the specified delays

[devCLee]

I wanted to make the three reels start at the same time when the draw button is clicked and stop them one after another with the specified delays.

But seems like when the animation is about to end on each slot, the result changes from the result that was about to show when it was about to stop.

All codes were edited on Slot.ts file.
These are the codes that I added.

private createReelAnimation(container: HTMLElement | null): Animation | undefined {
    return container?.animate(
      [
        { transform: 'none', filter: 'blur(0)' },
        { filter: 'blur(1px)', offset: 0.5 },
        // Here we transform the reel to move up and stop at the top of last item
        // "(Number of item - 1) * height of reel item" of wheel is the amount of pixel to move up
        // 7.5rem * 16 = 120px, which equals to reel item height
        { transform: `translateY(-${(this.maxReelItems - 1) * (7.5 * 16)}px)`, filter: 'blur(0)' }
      ],
      {
        duration: this.maxReelItems * 100, // 100ms for 1 item
        easing: 'ease-in-out',
        iterations: 1
      }
    );
  }

  private createGenreReelAnimation(container: HTMLElement | null): Animation | undefined {
    return container?.animate(
      [
        { transform: 'none', filter: 'blur(0)' },
        { filter: 'blur(1px)', offset: 0.5 },
        // Here we transform the reel to move up and stop at the top of last item
        // "(Number of item - 1) * height of reel item" of wheel is the amount of pixel to move up
        // 7.5rem * 16 = 120px, which equals to reel item height
        { transform: `translateY(-${(this.maxReelItems - 1) * (7.5 * 16)}px)`, filter: 'blur(0)' }
      ],
      {
        duration: this.maxReelItems * 150, // 100ms for 1 item
        easing: 'ease-in-out',
        iterations: 1
      }
    );
  }

  private createStyleReelAnimation(container: HTMLElement | null): Animation | undefined {
    return container?.animate(
      [
        { transform: 'none', filter: 'blur(0)' },
        { filter: 'blur(1px)', offset: 0.5 },
        // Here we transform the reel to move up and stop at the top of last item
        // "(Number of item - 1) * height of reel item" of wheel is the amount of pixel to move up
        // 7.5rem * 16 = 120px, which equals to reel item height
        { transform: `translateY(-${(this.maxReelItems - 1) * (7.5 * 16)}px)`, filter: 'blur(0)' }
      ],
      {
        duration: this.maxReelItems * 200, // 100ms for 1 item
        easing: 'ease-in-out',
        iterations: 1
      }
    );
  }

// Play the spin animation for all three reels simultaneously
    reelAnimation?.play();
    reelGenreAnimation?.play();
    reelStyleAnimation?.play();

// Wait for all animations to finish
    await Promise.all([
      new Promise<void>((resolve) => {
        reelAnimation?.addEventListener('finish', () => {
          reelAnimation?.removeEventListener('finish', () => {});
          reelAnimation?.finish();
          resolve();
        });
      }),
      new Promise<void>((resolve) => {
        // Stop the genre reel animation after 1 second
        reelGenreAnimation?.addEventListener('finish', () => {
          reelGenreAnimation?.removeEventListener('finish', () => {});
          reelGenreAnimation?.finish();
          resolve();
        });
      }),
      new Promise<void>((resolve) => {
        // Stop the style reel animation after an additional 1 second
        reelStyleAnimation?.addEventListener('finish', () => {
          reelStyleAnimation?.removeEventListener('finish', () => {});
          reelStyleAnimation?.finish();
          resolve();
        });
      }),
    ]);

   Array.from(reelContainer!.children)
      .slice(0, reelContainer!.children.length - 1)
      .forEach((element) => element.remove());

This part is the code that I deleted except the three .play() lines.

// Play the spin animation
    const animationPromise = new Promise<void>((resolve) => {
      const onAnimationFinish = () => {
        reelAnimation?.removeEventListener('finish', onAnimationFinish);
        reelGenreAnimation?.removeEventListener('finish', onAnimationFinish);
        reelStyleAnimation?.removeEventListener('finish', onAnimationFinish);
        resolve();
      };

      reelAnimation?.addEventListener('finish', onAnimationFinish);
      reelGenreAnimation?.addEventListener('finish', onAnimationFinish);
      reelStyleAnimation?.addEventListener('finish', onAnimationFinish);

      reelAnimation?.play();
      reelGenreAnimation?.play();
      reelStyleAnimation?.play();
    });

    await animationPromise;

[devCLee]

Ref: https://chat.openai.com/c/3df15647-6c9d-40d5-a962-28d8edae8b5d