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;

JavaScript

// 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;

JavaScript

// 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;

JavaScript

// 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;

JavaScript

// 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

JavaScript

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