4 ms·
I'm most proud of React Flip Move (https://github.com/joshwcomeau/react-flip-move https://github.com/joshwcomeau/react-flip-move), an animation library that doe
by joshwcomeau 10y ago
I'm most proud of React Flip Move (https://github.com/joshwcomeau/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!
- eptcyka 10y agoIs 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.
- joshwcomeau 10y agoSo, 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-unanimatable-1346a5aab3cd#.xns3ia1u9 https://medium.com/developers-writing/animating-the-unanimat...
- eptcyka 10y agoThanks for the insightful reply. This does bump up my morbid interest into web development, but I'm sure that will eventually fade away.
- rileyt 10y agoGreat job! this is a harder problem to solve than most people would imagine.
- joshwcomeau 10y agoThanks :)