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.

DOM nodes can't actually reorder themselves; brand new nodes are created instead. Because of this, simple CSS transitions don't work.

Flip Move uses the FLIP technique to work out what such a transition would look like, and fakes it using 60+ FPS hardware-accelerated CSS transforms.

Demos

• List/Grid Shuffle
• Fuscia Square
• Scrabble
• Playground (coming soon)

Installation

npm i -S react-flip-move

UMD builds are also available, in /dist.

Features

Flip Move was inspired by Ryan Florence's awesome Magic Move, and offers:

• Full compatibility with React 0.14+. Will be maintained.

• Exclusive use of hardware-accelerated CSS properties (transform: translate) instead of positioning properties (top, left). Read why this matters.

• Ability to 'humanize' transitions by staggering the delay and/or duration of subsequent elements.

• Ability to provide onStart / onFinish callbacks.

• Implementation based on the FLIP technique, a beautiful-in-its-simplicity method of tackling this problem. UMD build, when minified and gzipped, is only 2kb! ⚡

Quickstart

The implementation couldn't be simpler. Just wrap the items you'd like to move in a FlipMove, with any custom options:

import FlipMove from 'react-flip-move';

class TopArticles extends Component {
  renderTopArticles() {
    return this.props.articles.map( article => <Article {...article} key={article.id} /> );
  }

  render() {
    return (
      <div className="top-articles">
        <FlipMove easing="cubic-bezier(0, 0.7, 0.8, 0.1)">
          { this.renderTopArticles() }
        </FlipMove>
      </div>
    );
  }
}

Compatibility

How It Works

Curious how this works, under the hood? Read the full article.

Options

  This effect is great for "humanizing" transitions and making them feel less robotic.
</td>

  Similarly to <code>staggerDurationBy</code>, This effect is great for "humanizing" transitions and making them feel less robotic.
  <br><br>
  <strong>Protip:</strong> You can make elements animate one at a time by using an identical <code>duration</code> and <code>staggerDelayBy</code>.
</td>

  <ul>
    <li><code>childElement</code>: A reference to the React Element being animated.</li>
    <li><code>domNode</code>: A reference to the unadulterated DOM node being animated.</li>
  </ul>

  In general, it is advisable to ignore the <code>domNode</code> argument and work with the <code>childElement</code>.
  The <code>domNode</code> is just an escape hatch for doing complex things not otherwise possible.
</td>

  <ul>
  <li><code>childElement</code>: A reference to the React Element being animated.</li>
  <li><code>domNode</code>: A reference to the unadulterated DOM node being animated.</li>
  </ul>

  In general, it is advisable to ignore the <code>domNode</code> argument and work with the <code>childElement</code>.
  The <code>domNode</code> is just an escape hatch for doing complex things not otherwise possible.

</td>

Gotchas

• Does not work with stateless functional component children. This is because FlipMove uses refs to identify and apply styles to children, and stateless functional components cannot be given refs.

• All children need a unique key property. Even if FlipMove is only given a single child, it needs to have a unique key prop for FlipMove to track it.

• Existing transition/transform properties will be overridden. I am hoping to change this in a future version, but at present, FlipMode does not take into account existing transition or transform CSS properties on its direct children.

• Elements whose positions have not changed between states will not be animated. This means that no onStart or onFinish callbacks will be executed for those elements.

Contributions

Contributors welcome! Please discuss new features with me ahead of time, and submit PRs for bug fixes with tests (Testing stack is Mocha/Chai/Sinon, tested in-browser by Karma).

License

MIT