Example of how to have two animations back to back

react-motion-transition-example.js

import React, {Component} from 'react';
import {TransitionSpring} from '../Spring';
import {clone} from '../utils';

const defaultTickAmount = 100;
const constConfig = [120, 10];

class Demo extends Component {
  state = {
    someData: ["a", "b", "c", "d"]
  }

  onClick() {
    this.setState({
      someData: ["b", "c"]
    });
  }

  willLeaveOutter(key, endValue, currVals, currVelocity) {
    if(currVals[key].top.val === defaultTickAmount && currVelocity[key].top.val === 0) {
      return null;
    }

    return {
      top: {val: defaultTickAmount, config: constConfig}
    };
  }

  willLeaveInner(key, endValue, currVals) {
    if(currVals[key].opacity.val === 0) {
      return null;
    }

    return {
      ...currVals[key],
      opacity: {val: 0}
    };
  }

  endValueOutter() {
    let {someData} = this.state;

    let config = {};
    someData.map(key => {
      config[key] = {
        top: {val: 0, config: constConfig}
      };
    });

    return config;
  }

  render() {
    return (
      <TransitionSpring
        endValue={::this.endValueOutter}
        willLeave={::this.willLeaveOutter}>
          {outterCurrVals =>
            <TransitionSpring
              endValue={() => {
                let config = {};
                Object.keys(outterCurrVals).map(key => {
                  config[key] = {
                    ...outterCurrVals[key],
                    opacity: {val: 1}
                  };
                });

                return config;
              }}
              willLeave={::this.willLeaveInner}>
                {innerCurrVals =>
                  Object.keys(innerCurrVals).map((key, i) =>
                    <div
                      key={key}
                      onClick={::this.onClick}
                      style={{
                        opacity: innerCurrVals[key].opacity.val,
                        left: (innerCurrVals[key].top ? innerCurrVals[key].top.val : defaultTickAmount) + 100,
                        top: i * 20 + 100,
                        position: "absolute"
                      }}>
                        {key}
                    </div>
                  )
                }
            </TransitionSpring>
          }
      </TransitionSpring>
    );
  }
}

export default Demo;