Delay for ReactMotion

Delay.jsx

import React, {Component} from 'react';
import {render} from 'react-dom';
import {Motion, spring} from 'react-motion';

// helper to delay a prop being passed by `period` ms
class Delay extends Component{
  static defaultProps = {
    period: 0
  };
  state = {
    value: this.props.initial
  };
  refresh(props){
    let {value, period} = props;
    setTimeout(() => this.setState({
      value
    }), period);
  }
  componentDidMount() {
    this.refresh(this.props);
  }
  componentWillReceiveProps(next){
    this.refresh(next);
  }
  render(){
    // function-as-children
    return this.props.children(this.state.value);
  }
}

const boxes = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];

const styles = {
  wrap: {
    width: 500
  },
  box: {
    margin: 5,
    width: 100,
    height: 100,
    float: 'left',
    backgroundColor: 'blue',
    transformOrigin: 'center center'
  }
};

class App extends Component{
  render() {
    return (
      <div style={styles.wrap}>
        {boxes.map((box, i) =>
          <Delay key={box} initial={0} value={1} period={i*80}>{ delayed =>
            <Motion defaultStyle={{scale: 0}} style={{scale: spring(delayed)}}>{ val =>
              <div style={{...styles.box, transform: `scale(${val.scale})`}}>
                {box}
              </div>
            }</Motion>
          }</Delay>)}
      </div>
    );
  }
}

render(<App/>, document.getElementById('app'));