Package Exports

react-flip-move

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-flip-move) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Flip Move

Animations library for React that automagically handles animations when a DOM node gets reordered or moved. Emphasis on smooth, 60+ FPS animations using the FLIP technique.

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.

Quickstart

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

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 duration={250} easing="ease-in-out">
          { this.renderTopArticles() }
        </FlipMove>
      </div>
    );
  }
}

Compatibility

	Chrome	Firefox	Safari	IE	Edge	iOS Safari/Chrome	Android Chrome
Supported	✔ 10+	✔ 4+	✔ 6.1+	✔ 10+	✔	✔ 6.1+	✔

How It Works

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

Options

Option	Accepted Type(s)	Default	Details
`children`	`Array` `Object`		The children passed to FlipMove are the component(s) or DOM element(s) that will be moved about. Accepts either a single child (as long as it has a unique `key` property) or an array of children.
`duration`	`Integer` `String`	350	The length, in milliseconds, that the transition ought to take.
`easing`	`String`	"ease-in-out"	Any valid CSS3 timing function (eg. "linear", "ease-in", "cubic-bezier(1, 0, 0, 1)").
`delay`	`Integer` `String`	0	The length, in milliseconds, to wait before the animation begins.
`staggerDurationBy`	`Integer` `String`	0	The length, in milliseconds, to be added to the duration of each subsequent element. For example, if you are animating 4 elements with a `duration` of 200 and a `staggerDurationBy` of 20: The first element will take 200ms to transition. The second element will take 220ms to transition. The third element will take 240ms to transition. The fourth element will take 260ms to transition. `This effect is great for "humanizing" transitions and making them feel less robotic. </td>`
`staggerDelayBy`	`Integer` `String`	0	The length, in milliseconds, to be added to the delay of each subsequent element. For example, if you are animating 4 elements with a `delay` of 0 and a `staggerDelayBy` of 20: The first element will start transitioning immediately. The second element will start transitioning after 20ms. The third element will start transitioning after 40ms. The fourth element will start transitioning after 60ms. `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>`
`onStart`	`Function`		A callback to be invoked once per child element at the start of the animation. The callback is invoked with two arguments: <ul> <li><code>childElement</code>: A reference to the <a href="https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html#elements-describe-the-tree">React Element</a> 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>
`onFinish`	`Function`		A callback to be invoked once per child element at the end of the animation. The callback is invoked with two arguments: `<ul> <li><code>childElement</code>: A reference to the <a href="https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html">React Element</a> 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

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.

License

MIT