Hacker News new | past | comments | ask | show | jobs | submit login

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!




Great job! this is a harder problem to solve than most people would imagine.


Thanks :)


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...


Thanks for the insightful reply. This does bump up my morbid interest into web development, but I'm sure that will eventually fade away.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: