Using react-motion with react-router

RouteTransition.jsx

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

/**
 * One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
 *
 * Usage is simple, and really only requires two things–both of which are
 * injected into your app via react-router–pathname and children:
 *
 *   <RouteTransition pathname={this.props.pathname}>
 *     {this.props.children}
 *   </RouteTransition>
 */
const RouteTransition = React.createClass({
  propTypes: {
    pathname: PropTypes.string.isRequired
  },

  willEnter() {
    return {
      handler: this.props.children,
      opacity: spring(0),
      scale: spring(0.95)
    };
  },

  willLeave(key, value) {
    return {
      handler: value.handler,
      opacity: spring(0),
      scale: spring(0.95)
    };
  },

  getStyles() {
    const { children, pathname } = this.props;

    return {
      [pathname]: {
        handler: children,
        opacity: spring(1),
        scale: spring(1)
      }
    };
  },

  render() {
    return (
      <TransitionMotion
        styles={this.getStyles()}
        willEnter={this.willEnter}
        willLeave={this.willLeave}
      >
        {interpolated =>
          <div>
            {Object.keys(interpolated).map(key =>
              <div
                key={`${key}-transition`}
                style={{
                  position: 'absolute',
                  opacity: interpolated[key].opacity,
                  transform: `scale(${interpolated[key].scale})`
                }}
              >
               {interpolated[key].handler}
              </div>
            )}
          </div>
        }
      </TransitionMotion>
    );
  }
});

module.exports = RouteTransition;

oops, sorry all. didn't see these comments until now.
the usage listed by @miracle2k is correct.

Note: this.props.location.pathname is what you'll want to pass if you're using newer version of React-Router

I don't suppose there is a way to get around setting position absolute on this thing is there? I have a react app in the middle of a header & footer... but because I have to use absolute positioning, the footer goes underneath all the routes.

Same example but using a stateless functional component:

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

const willEnter = children => ({children, opacity: spring(0), scale: spring(0.95)});
const willLeave = (key, {children}) => ({children, opacity: spring(0), scale: spring(0.95)});
const getStyles = (children, pathname) => ({[pathname]: {children, opacity: spring(1), scale: spring(1)}});

export default function RouteTransition({children, pathname}) {
  return (
    <TransitionMotion
      styles={getStyles(children, pathname)}
      willEnter={willEnter}
      willLeave={willLeave}
    >
      {interpolated =>
        <div>
          {Object.keys(interpolated).map(key =>
            <div
              key={`${key}-transition`}
              style={{
                position: 'absolute',
                opacity: interpolated[key].opacity,
                transform: `scale(${interpolated[key].scale})`
              }}
            >
              {interpolated[key].children}
            </div>
          )}
        </div>
      }
    </TransitionMotion>
  );
}