Animation looks weird when position and boardOrientation are changed at the same time

[alfredbirk]

In this video, when I change the board orientation and position at the same time, the animation looks weird. Is it possible to fix it so that the pieces still moves smoothly in this case?

https://github.com/Clariity/react-chessboard/assets/11172530/76c474b8-2893-46df-a59f-b1dc1697c04b

You can test yourself on www.endgametrainer.com

[alfredbirk]

For reference, in Lichess puzzles (https://lichess.org/training) they have managed to make it look smooth also when board is flipped in next puzzle

[Manukyanq]

I'm working on it, it is a bit complicated... except fixing the issue also trying to add beatuiful fade effect for appearing and dissapearing pieces.

https://github.com/Clariity/react-chessboard/assets/42891870/425eadad-9d42-4d5a-b650-efd93bcb5f1e

[alfredbirk]

Nice, I like it!

[Manukyanq]

Hi! I hope I've fixed the issue, demo is here: https://react-chessboard-git-fork-manukyanq-fix-positio-b67a14-clariity.vercel.app/?path=/story/example-chessboard--test-board

Can you please test the branch with fix in your own project, to make sure that all is ok?

[alfredbirk]

Hey! I just ran it locally with my app and tested. I found out part of reason for the for the weird transition in my app was my fault. I had two separate state variables for board orientation and position and they weren't updated on the same render for some reason.

But I tested with and without your fix, and the fix makes it look even better in my opinion. Cause now it first flips the position and then the animation happens, just like it does on Lichess. Thanks!

[Clariity]

Fixed in https://github.com/Clariity/react-chessboard/releases/tag/v4.2.2