Page Transitions In React With React Router V6 and Framer Motion

Adel Benyahia
2 min readOct 30, 2022

In this tutorial we will use react-router-dom and framer-motion to animate transitions between different routes of our application.

We will start from this project

./Img

contain some images

styles.css

CSS styling for our application

Index.js

<StrictMode> <BrowserRouter>  <Routes>    <Route path="/*" element={<App />} />  </Routes> </BrowserRouter></StrictMode>

As you can see <BrowserRouter> wrap our application

<Route path="/*" element={<App />} />

path=”/*” means that all routes after “/” will be router to <App>

Header.js

<span>ReactJs Router Framer-motion</span><div className=”link__container”>  <Link to=”/”>Home</Link>  <Link to=”/download”>Download</Link>  <Link to=”/about”>About</Link></div>

Simple component that contain the title of the application and simple <Link> for the navigation between pages

the <Link> component is imported from “react-router-dom”

App.js

<>
<Header />
<Routes> {/* Routes */} <Route index element={<Home />} /> <Route path="About" element={<About />} /> <Route path="download" element={<Download />} /> {/* 404 page */} <Route path="*" element={<PageNotFound />} /></Routes></>

Home.js

<main>  <h1>Home</h1>  <p>    Lorem ipsum ......  </p><img className="img" src={home} alt="Home" /></main>

Simple Page with <h1> title , “Lorem ipsum…” paragraph, and an image

Download an About are the same

Adding the page transition

First install framer-motion package

npm i framer-motion

Then in your <App> component

import { Routes, Route, useLocation } from "react-router-dom";import { AnimatePresence } from "framer-motion";.....export default function App() {const location = useLocation();return (<><Header /><AnimatePresence>  <Routes location={location} key={location.pathname}>    {/* Routes */}    <Route index element={<Home />} />    <Route path="About" element={<About />} />    <Route path="download" element={<Download />} />    {/* 404 page */}    <Route path="*" element={<PageNotFound />} />  </Routes></AnimatePresence></>

As you can see All pages are wrapped by <AnimatedPresence> imported from “framer-motion”

and

<Routes location={location} key={location.pathname}>

added from useLocation() reactjs hook

Then All pages (Home,Download and About)

import { motion } from "framer-motion";....
<motion.main
className="main__container" initial={{ width: 0 }} animate={{ width: "100%" }} exit={{ x: "100%", opacity: 0 }} transition={{ duration: 2 }}>.....</motion.main>

As you can see, we imported {motion} from “framer-motion” package

then we simply added “motion.” before the opening and closing the <main> tag.

initial={{ width: 0 }}animate={{ width: "100%" }}exit={{ x: "100%", opacity: 0 }}transition={{ duration: 2 }}

. initial: represent the initial state of the animation

. animate: animate the Motion component to this state after mounting.

. exit: fired just before the Motion component exit (removed from the dom)

. transition: the transition effect between initial and exit

The final code:

Extra:

Try out these transition effect

initial={{ y: -20, opacity: 0 }}animate={{ y: 0, opacity: 1 }}transition={{duration: 0.7,ease: [0.6, -0.05, 0.01, 0.99]}}

And

initial={{ width: 0 }}
animate={{ width: "100%" }}
exit={{ x: "100%",opacity:0 }}
transition={{ duration: 2, type: "spring", stiffness: 100 }}

Share with us your transition codes…

--

--

Adel Benyahia

Web application developer (HTML │ CSS │ JS | ReactJS | NextJS | NestJS | MERN)