painless transitions built for react-router, powered by react-motion
Clone or download

React Router Transition

Painless transitions for React Router, powered by React Motion. Example site.

  • v4-first
  • backward-compatible with previous versions of react-router


npm install --save react-router-transition

Example Usage

import Router from 'react-router-dom/BrowserRouter';
import { AnimatedSwitch } from 'react-router-transition';
import Route from 'react-router-dom/Route';

export default () => (
      atEnter={{ opacity: 0 }}
      atLeave={{ opacity: 0 }}
      atActive={{ opacity: 1 }}
      <Route exact path="/" component={Home} />
      <Route path="/about/" component={About}/>
      <Route path="/etc/" component={Etc}/>
.switch-wrapper {
  position: relative;

.switch-wrapper > div {
  position: absolute;



This library has some obvious limitations, the most marked of which are:

  • no staggering or sequencing of animations
  • no durations or timing functions