I'm most proud of React Flip Move (https://github.com/joshwcomeau/react-flip-move), an animation library that does exactly one thing: animate transitions when DOM nodes change positions (eg. list re-ordering).
I wind up using it in almost every project I work on, since just about every app has a list of some kind, and many lists need to support being sorted, having items added, etc.
It's a simple tool, but the internal logic is surprisingly complex. The DOM is a tricky beast!
Is that a purely JS thing ? Surely such things would be best done by CSS?
I am speaking as a person with 0 experience apping production level web apps.
So, the issue is that CSS transitions only handle CSS attribute changes. For example, if I apply a CSS attribute like `transform: translateY(100px);`, I can easily animate that using CSS.
When an item's DOM position changes, there's no CSS change to animate. You can throw a `transition: 1s` on it, and nothing'll happen. This is the distinction between moving an item around on-screen, and removing/appending a DOM node from one position in the tree to another.
For Flip Move: I actually do use CSS transitions to accomplish it, but through trickery known as the FLIP technique. You can read all the nitty-gritty details, if it interests you, in a blog post I wrote: https://medium.com/developers-writing/animating-the-unanimat...
I wind up using it in almost every project I work on, since just about every app has a list of some kind, and many lists need to support being sorted, having items added, etc.
It's a simple tool, but the internal logic is surprisingly complex. The DOM is a tricky beast!