Clariity
Sping-based animations
Right now react-chessboard uses duration-based animations (https://github.com/Clariity/react-chessboard/blob/90899f3aeb8650722615ca67b057eab73dd6fe6d/package/src/components/Piece.js#L102) - these are good because they're simple and predictable. However, there is a big downside: further pieces move really fast, and closer pieces move really slow. Spring-based animations would offer natural-feeling movement regardless of the distance a piece has to travel.
I'd like to propose adopting https://react-spring.io/ for piece movement. A few questions/considerations to keep in mind:
- React-spring would add about 38kb (raw) to bundle size. Is that acceptable?
- We could give consumers the choice between spring-based and durational animations. Is this important?
- Because react-spring is not durational, for consumers to synchronize their games with react-chessboard's animations, we would need to expose a new callback (onAnimationEnd).
@Clariity let me know what you think of this. I'm going to implement it for a project I'm working on and would be happy to contribute back if you're in support.
that sounds really interesting
the way animations currently work in the library with regards to knowing what piece to move where is very unintuitive and a real pain, so by all means please give it a go and see if you can improve it, I look forward to seeing the result 😄
Update from me here: I attempted to migrate react-chessboard to spring-based animations, but found it easier to rewrite the whole chessboard, which I ended up doing.
Why did I need to do a full rewrite? react-chessboard nests it's pieces in row containers, and fakes animations with a translate applied on top of the regular positioning styles, which means you can't easily move a piece from one square to another. react-chessboard also does not assign ids to pieces, which again makes it hard to persist pieces across moves.
My solution places all pieces in a flat hierarchy and assigns them all UUIDS that we can then update and animate as needed.
@Clariity sorry if my comment wasn't clear; I didn't end up using this library at all. I wrote a new chessboard from scratch. Happy to share more details about my solution if you are curious, but I'm going to close this issue for now.