Page transition in React.js using Framer Motion
Last Updated :
26 Jul, 2024
Page transition in React JS while switching and page loading in Routing adds extra animation to the web app. Framer motion provides customizable and easy-to-use animations and gestures for a better appearance and transition effects.
Prerequisites
Approach for Page Transition in React JS
To show Page transition in React.js using Framer Motion We'll create a portfolio application for GeeksforGeeks with the Navbar component for navigation to different components, such as Home, About, and Contact. We will use framer motion to add page transitions to different routes in our React application.
Framer-motion is an open-source, production-ready animation and gesture library for React. It provides a low-level API to simplify animation and gesture integration into the application while maintaining HTML and SVG semantics.
We’re going to add certain props that are defined in framer motion, such as
- initial: This indicates how the component will look at the beginning of the animation.
- animate: This is what the component looks like after it has finished animating.
- exit: This defines the style of the component after it has animated out of the animation.
- transition: This specifies how long we want the duration to last.
Steps to create React Application
Step 1: Make a project directory, head over to the terminal, and create a React app named “portfolio” using the following command:
npx create-react-app portfolio
Step 2: After the portfolio app is created, switch to the new folder portfolio using the following command:
cd portfolio
Step 3: Install the required packages using the following command
npm i react-router-dom@5 framer-motion bootstrap
Project Structure:
Final Project Structure The updated dependencies in package.json file will look like:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"framer-motion": "^10.16.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
We will configure the animation props and pass them in the variants which enable us to define the animation state.
At first, the prop is invisible. Initially, the opacity is kept at 0 to make it invisible. It will then animate for 3 seconds to become visible. This creates a simple fade-in and fade-out animation.
Example: Created a multipage application with react-router-dom with navigation for routing and framer-motion to provide transitions to the loading and exiting components.
JavaScript
// Filename - App.js
import "bootstrap/dist/css/bootstrap.min.css";
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import { useLocation } from "react-router-dom";
import About from "./Components/About";
import Contact from "./Components/Contact";
import Home from "./Components/Home";
import Navbar from "./Components/Navbar";
import { AnimatePresence } from "framer-motion";
const Animated = () => {
const location = useLocation();
return (
<AnimatePresence>
<Switch
location={location}
key={location.pathname}
>
<Route
exact
path="/"
component={Home}
></Route>
<Route
exact
path="/about"
component={About}
></Route>
<Route
exact
path="/contact"
component={Contact}
></Route>
</Switch>
</AnimatePresence>
);
};
function App() {
return (
<div className="App">
<>
<Router>
<Navbar />
<Animated />
</Router>
</>
</div>
);
}
export default App;
// Filename - Components/Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav
className="navbar navbar-expand-lg
navbar-light bg-light"
>
<div className="container-fluid">
<a className="navbar-brand" href="/">
GeeksforGeeks
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className="collapse navbar-collapse"
id="navbarNav"
>
<ul className="navbar-nav">
<li className="nav-item">
<Link
className="nav-link active"
aria-current="page"
to="/"
>
Home
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/about"
>
About Us
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/contact"
>
Contact Us
</Link>
</li>
</ul>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
// Filename - Components/Home.js
import React from "react";
import Transitions from "./Transition";
const Home = () => {
return (
<>
<Transitions>
<h3
className="mt-5"
style={{ color: "green" }}
>
Welcome to GeeksforGeeks
</h3>
</Transitions>
</>
);
};
export default Home;
// Filename - Components/Contact.js
import React from "react";
import Transitions from "./Transition";
const Contact = () => {
return (
<>
<Transitions>
<h3
className="mt-5"
style={{ color: "green" }}
>
Address : GeeksforGeeks
<br />
5th & 6th Floor, Royal Kapsons, A- 118,
Sector- 136, Noida, Uttar Pradesh
(201305)
</h3>
</Transitions>
</>
);
};
export default Contact;
// Filename - About.js
import React from 'react'
import Transitions from './Transition'
const About = () => {
return (
<>
<Transitions>
<h2 className='mt-5 text-center'
style={{ color: 'green' }}>
GeeksforGeeks is a computer
science portal for Geeks.
</h2>
</Transitions>
</>
)
}
export default About
// Filename - Components/Transition.js
import { motion } from "framer-motion";
const animationConfiguration = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
};
const Transitions = ({ children }) => {
return (
<motion.div
variants={animationConfiguration}
initial="initial"
animate="animate"
exit="exit"
transition={{ duration: 3 }}
>
{children}
</motion.div>
);
};
export default Transitions;
Step to run the Application: Run the application by using the following command:
npm start
Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. We will observe transitions between the pages as we navigate through them.
Similar Reads
Animated sliding page gallery using framer-motion and React.js
The following approach covers how to create an animated sliding page gallery using framer-motion and ReactJS.Prerequisites:Knowledge of JavaScript (ES6)Knowledge of HTML and CSS.Basic knowledge of ReactJS.Creating React Application And Installing Module:Step 1: Create a React application using the f
4 min read
Animation and Transitions using React Hooks
Animations allows to control the elements by changing their motions or display. Animation is a technique to change the appearance and behaviour of various elements in web pages. Transitions in CSS allow us to control the way in which transition takes place between the two states of the element. We c
6 min read
How to reorder list of items using Framer Motion in ReactJS?
To reorder the list of items using Framer Motion in ReactJS we will use a dummy list and the reorder component that enables reordering of items on user interaction.Prerequisites:NPM & Node.jsReactJSIntroduction of Framer-motionApproachWe can reorder a list of items using the Framer motion librar
2 min read
React Chakra UI Other Transitions
React Chakra UI has a Transition component which has types like Fade, ScaleFade, SlideFade, and Collapse. All these types provide animation effects and smooth transitions in the application. By using the transition types in the application, the appearance of the elements is enhanced and the applicat
3 min read
How to create card animation using React Transition Group ?
Creating card animation using React Transition Group simply refers to displaying animations in the card when any DOM event occurs. React transition group provide simple and easy-to-use components to display animation in the React components.Prerequisites:React JSNPM and Node.jsReact JS Transition Gr
3 min read
Contact Us Page using ReactJS and Tailwind
The Contact Us page is crucial for user interaction, allowing users to connect with the website owner or customer support, submit feedback, and suggestions, and access departmental contact information.Preview of final output: Let us have a look at how the final output will look like.Prerequisites:Re
6 min read
How to create a rolling die using React and framer-motion ?
We can create a die using react with plain CSS and framer-motion library for animating, Framer Motion library helps to animate the UI elements.Prerequisites:JavaScriptHTMLCSSReactJSSteps to Create the React Application And Installing Module:Step 1: Create a React application using the following comm
3 min read
React MUI Transitions Util
React MUI transition component enables you to define a change from one component state to another across time. Although it's most frequently used for animation component mounting and unmounting, it can also be utilized to depict in-place transition states. It's up to you to give those states purpose
6 min read
Ping Pong Game using React
Ping Pong is one of the earliest video games. It's a two-player game in which each player controls the paddle by dragging it from one side of the screen to the other to strike the ball back and forth. In this article, you will see how you can create a simple but exciting game of ping pong using Reac
4 min read
Blog Page Template using React JS and Tailwind
A Blog Page is a web page that is used to display multiple blog posts on a website. Using blogs people can share their views, ideas, and opinions. A Blog Page generally contains a NavBar and Introduction followed by multiple blogs displayed in the form of a card. Prerequisites:React JSTailwind CSS p
6 min read