Unable to run code after move animation finishes

[mnz2000]

I was following the code in examples/validate-moves.html:

event.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
  event.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
    makeEngineMove(event.chessboard)
  })
 })

Unfortunately, the second line does not work, but instead the returned Promise resolves immediately. This happens because the user has already dragged the piece to a new location, and setPosition() sees a null-move with positionTo equal to positionFrom.

In the sample, this causes no problems, but in my real project I'd like to make other animations in-sync with the piece animation. Most notably, there is a big difference in animation timings if the user drag&drops a piece, or clicks twice to move.

[shaack]

If the user drags the piece, how could you show an animation in sync with this? You don't know, how long the moving takes.

[mnz2000]

My other animation should start once the moved piece is in its new square. When the user drags the piece, it is already there at validateMoveInput time, so my animation can kick in immediately. But when the user clicks twice, there is the animation of the piece moving, and I need to wait until that finishes. The issue is that waiting for this is NOT possible the way examples/validate-moves.html suggests.