React. How to animate transitions between React Router routes

Learn how to create animations when navigating between routes using React Router

Basic animation with React Transition Group

yarn add react-transition-group
Image for post
Image for post
Image for post
Image for post
.modal-transition-enter {

}
.modal-transition-enter-active {

}
.modal-transition-exit {}.modal-transition-exit-active {}.modal-transition-appear {}.modal-transition-appear-active {}
Image for post
Image for post

Animating transitions between React Router routes

💡 React Transition Group

<TransitionGroup>
<CSSTransition key="first" ...>
<Item/>
</CSSTransition>
</TransitionGroup>
<TransitionGroup>
<CSSTransition key="second" ...>
<Item/>
</CSSTransition>
</TransitionGroup>
<TransitionGroup>// saliendo
<CSSTransition key="first" ...>
<Item/>
</CSSTransition>
// entrando
<CSSTransition key="second" ...>
<Item/>
</CSSTransition>
</TransitionGroup>

💡 Basic concepts to animate React Router

<Switch>
<TransitionGroup>
<CSSTransition>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
...
</CSSTransition>
</TransitionGroup>
</Switch>
<TransitionGroup>
<CSSTransition>
<Switch>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>
<TransitionGroup>// saliendo
<CSSTransition>
<Switch>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
// entrando
<CSSTransition>
<Switch>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>

🔛 Creating a basic transition for React Router

const AnimatedSwitch = withRouter(({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="slide"
timeout={1000}
>
<Switch>
<Route path='/first' component={First} />
<Route path='/second' component={Second} />
</Switch>
</CSSTransition>
</TransitionGroup>
));
<TransitionGroup>  // exiting
<CSSTransition>
// The exiting Switch is taking the object location
// from the context, so
// location.path = '/first'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
// entering
<CSSTransition>
// The entering Switch is also taking the object location
// from the context, so
// location.path = '/first'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>
const AnimatedSwitch = withRouter(({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="slide"
timeout={1000}
>
<Switch location={location}>
<Route path='/first' component={First} />
<Route path='/second' component={Second} />
</Switch>
</CSSTransition>
</TransitionGroup>
));
<TransitionGroup>// saliendo
<CSSTransition>
// El Switch que sale está cogiendo el objeto location
// procedente del HOC withRouter, el cual es inmutable y por
// tanto, location.path = '/'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
// entrando
<CSSTransition>
// El Switch que entra también está cogiendo el objeto location
// del HOC withRouter, que ahora contendrá la información
// actualizada con la ruta hacia la que nos dirigimos, es decir
// location.path = 'first'

<Switch>
<Route path='/'><HomeComponent /></Route>
<Route path='/first'><FirstComponent /></Route>
<Route path='/second'><SecondComponent /></Route>
</Switch>
</CSSTransition>
</TransitionGroup>

Final thoughts

Do you want to read more articles like this?

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store