Self-hosted alternatives to react-flip-move

R

react-flip-move

Effortless animation between DOM changes (eg

React Flip Move is a library that animates a list of items when the order of the list changes. CSS transitions only work on CSS properties, so when a list is reshuffled the elements have no way to animate their new positions. Flip Move applies the FLIP technique, which measures where each element was and where it is now, and then fakes the movement with CSS transforms. The library uses only hardware-accelerated transform properties, not positioning properties like top and left, so the animation stays smooth. It also supports enter and exit animations with a few presets, and it can stagger the delay or duration of later items to make a list feel more natural. Start and finish callbacks let you respond when an animation runs. It works with Preact and other React-like libraries and can be loaded through npm, Yarn or a UMD build. Functional components need to be wrapped with forwardRef before they work with Flip Move. The README states that the project is not actively developed, and the author is looking for maintainers, so it is kept working only for new React versions. The README suggests react-flip-toolkit as an alternative.