#265 · Primary category: Video & Animation

react-flip-move

animation flip hardware-acceleration react react-flip-move reactjs transition-animation

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

Project last updated:12/06/22

GitHub Stars

4.1K

Forks

250

Contributors

39

License

MIT

Why we included this project

React Flip Move solves a problem CSS transitions can't touch: when a list is reordered, the DOM nodes haven't actually moved, so the browser has nothing to animate and items just snap into place. The library measures each element's old and new position and fakes the motion with hardware-accelerated CSS transforms, which is how it reaches smooth 60fps animation without you writing any of the measurement logic. You wrap your existing children in a single component, and it also covers enter and exit animations with built-in presets and optional staggering. For React apps with dashboards, kanban boards, or any list that changes order, it's a small, focused dependency that adds polish without much setup.

Articles for this project

No articles for this project yet.

To suggest a topic or contribute an article, contact us.

Related projects in this category