Last updated 193 days ago by Veerasundar Kalyanasundaramreact
While building the next version of RoutePlanGo, I needed a way to animate the page transition when the user navigates to different URLs in the app. RoutePlanGo is built using React and Styled Components and uses React Router for URL handling. This article explains how to use the React Transition Group to implement the page transition animation in the app.
Here’s the example of page transition animation that we are building. This example app has Home page and Details page. When the user goes to details page, it slides in the page and updates the URL. And, when the user goes back, it slides out the details page and slides in the home page for a smooth UI experience.
For this example, we need to have a react application. You can either use “create-react-app” in your local, or use Code Sandbox in the cloud to setup a simple react application.
Once you have the react app, please install the following modules:
```language-bash # to handle CSS styles npm install styled-components --save # to handle URL routing npm install react-router-dom --save # to apply animation on component transition npm install react-transition-group --save ```
Our demo app has these components: App, starting point and handles route transition between pages, HomePage and DetailsPage to demonstrate the individual pages.