Example Loop component React-Motion

Loop-react-motion.js

let Loop = React.createClass({
  getInitialState() {
    return {
      isMovingToEnd: true
    };
  },

  endValue(currVals) {
    let {endValueProp, isDone, startValue} = this.props;
    let {isMovingToEnd} = this.state;

    if(isDone(currVals, isMovingToEnd)) {
      this.setState(() => {
        return !isMovingToEnd;
      });
    }

    return isMovingToEnd ? endValueProp(currVals) : startValue(currVals);
  },

  render() {
    return (
      <Spring endValue={this.endValue}>
        {this.props.children}
      </Spring>
    );
  }
});

// You could use it like this
let Test = React.createClass({
  endValue() {
    return [0, 0, 0, 0];
  },

  startValue() {
    return [10, 10, 10, 10];
  },

  isDone(currVals, isMovingToEnd) {
    return isMovingToEnd ?
            currVals.every(v => v === 0) :
            currVals.every(v => v === 10);
  },

  render() {
    return (
      <Loop
        endValue={this.endValue}
        isDone={this.isDone}
        startValue={this.startValue}>
      </Loop>
    );
  }
});