Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joshwcomeau/react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
https://github.com/joshwcomeau/react-flip-move

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

Last synced: 3 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
React Flip Move

=========



[![build status](https://travis-ci.org/joshwcomeau/react-flip-move.svg?branch=master)](https://travis-ci.org/joshwcomeau/react-flip-move)

[![npm version](https://img.shields.io/npm/v/react-flip-move.svg)](https://www.npmjs.com/package/react-flip-move)

[![npm monthly downloads](https://img.shields.io/npm/dm/react-flip-move.svg)](https://www.npmjs.com/package/react-flip-move)



This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes.



CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.



Flip Move uses the [_FLIP technique_](https://aerotwist.com/blog/flip-your-animations/#the-general-approach) to work out what such a transition would look like, and fakes it using 60+ FPS hardware-accelerated CSS transforms.



[**Read more about how it works**](https://medium.com/developers-writing/animating-the-unanimatable-1346a5aab3cd)



[![demo](https://s3.amazonaws.com/githubdocs/fm-main-demo.gif)](http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle)



## Current Status



React Flip Move is [looking for maintainers](https://github.com/joshwcomeau/react-flip-move/issues/233)!



In the meantime, we'll do our best to make sure React Flip Move continues to work with new versions of React, but otherwise it isn't being actively worked on.



Because it isn't under active development, you may be interested in checking out projects like [react-flip-toolkit](https://github.com/aholachek/react-flip-toolkit).



## Demos



  * __List/Grid Shuffle__

  * __Fuscia Square__

  * __Scrabble__

  * __Laboratory__



## Installation



Flip Move can be installed with [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/en/).



```bash

yarn add react-flip-move



# Or, if not using yarn:

npm i -S react-flip-move

```



A UMD build is made available for those not using JS package managers:

* [react-flip-move.js](https://unpkg.com/react-flip-move/dist/react-flip-move.js)

* [react-flip-move.min.js](https://unpkg.com/react-flip-move/dist/react-flip-move.min.js)



To use a UMD build, you can use `` tags:



```html

<html>

  <body>

    <script src="https://unpkg.com/react-flip-move/dist/react-flip-move.js">

    

      // Will be available under the global 'FlipMove'.