I'm making "wordle" game in Svelte.

Context

There is a 2d table, and I wanna give effect to current cell(I know currentX and currentY). When user types a specific letter, I have to update its position value to the next cell. I coded like below.

typedLetterStore.subscribe(({ letter }) => {
  if (letter === "") {
    return;
  }
  board[currentX][currentY] = letter;

  if (currentY + 1 === COL) {
    if (currentX + 1 < ROW) {
      currentX += 1;
      currentY = 0;
    }
  } else {
    currentY += 1;
  }
});

<div class="board">
  {#each board as boardRow, rowIndex}
    <div class="board__row">
      {#each boardRow as element, colIndex}
        <span
          class="board__element"
          class:board__element--current={
            currentY === colIndex &&
            element !== ""}
        >
          {element}
        </span>
      {/each}
    </div>
  {/each}
</div>

board__element--current gives "scale-down" effect by CSS animation, but it doesn't trigger any effect when I use update logic above(which updates currentX and currentY). Of course, I can give effect using reverse calculation to the currentX and currentY to satisfy previous position. But, it doesn't feel natural method. To summarize, I need 2 things.

• Give "scale-down" effect to current position.
• Update currentX and currentY to the next position

I already tried afterUpdate Svelte lifecycle API, but it didn't work.

Question

How can I update currentX and currentY AFTER "scale-down" animation end? You can check what is "scale-down" effect in official wordle game by typing any letter.