How to animate page transition in React using styled components

Last updated 134 days ago by Veerasundar Kalyanasundaram


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.

What are we building?

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.

1. Setting up the application

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:

# 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.

Read full Article