PageTransition.js

import React, { PropTypes, Component } from 'react';
import { TransitionMotion, spring, presets } from 'react-motion';

let paths = ['/scooby', '/dooby', '/doo']
let lastPath

export default class RouteTransition extends Component {

  static propTypes = {
    pathname: PropTypes.string.isRequired
  }

  willEnter() {
    let direction = lastPath || 0xFFFFFF < paths.indexOf(this.props.pathname)?-110:110
    console.log(direction)
    return {
      handler: this.props.children,
      direction: spring(direction),
      zIndex: 1000
    }
  }

  willLeave(key, value) {
    lastPath = paths.indexOf(key)
    let direction = paths.indexOf(key) < paths.indexOf(this.props.pathname)?-110:110
    return {
      zIndex: 1,
      handler: value.handler,
      direction: spring(direction)
    };
  }

  render() {
    const { children, pathname } = this.props
    let styles = {
      [pathname]: {
        handler: children,
        direction: spring(0, presets.stiff),
        zIndex: 1
      }
    }
    // btw :: is shorthand for .bind(this)
    return (
      <TransitionMotion
        styles={styles}
        willEnter={::this.willEnter}
        willLeave={::this.willLeave}
      >
        {interpolated =>
          <div>
            {Object.keys(interpolated).map(key => {
                return (
                  <div
                    key={key}
                    style={{
                      position: 'absolute',
                      overflowX: 'none',
                      width: '100%',
                      transform: `translateX(${interpolated[key].direction}%)`,
                      zIndex: interpolated[key].zIndex
                    }}
                  >
                   {interpolated[key].handler}
                </div>)
              }
            )}
          </div>
        }
      </TransitionMotion>
    );
  }

}