Popularity
7.4
Stable
Activity
1.9
Declining
2,145
23
115

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v1.3.0

react-router-transition alternatives and similar libraries

Based on the "UI Animation" category

Do you think we are missing an alternative of react-router-transition or a related project?

Add another 'UI Animation' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
More from our team

README

React Router Transition

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

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

Installation

npm install --save react-router-transition react-router-dom

Example Usage

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

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

.switch-wrapper {
  position: relative;
}

.switch-wrapper > div {
  position: absolute;
}

Docs

Limitations

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

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