Wrap components in Shuffle to add smooth transitions between shuffling or filtering them.

View on Github


Animated shuffling of child components


npm install react-shuffle



Simply wrap child components with this component and dynamically change them to see them animate. The only real requirement is that each child has a non-index based key, for proper position identification.


durationReact.PropTypes.numberDuration of animation
fadeReact.PropTypes.boolShould children fade on enter/leave
scaleReact.PropTypes.boolShould children scale on enter/leave
intialReact.PropTypes.boolShould scale/fade occur on first load


'use strict';

var React = require('react');

var Shuffle = require('react-shuffle');

const App = React.createClass({
  render() {
    return (
       {// Method to render children goes here}

module.exports = App;

Shout out

react-shuffle is heavily inspired by Ryan Florences Magic Move demo