Transitions

To enhance the experience of a user browsing a React application, we can switch between pages smoothly using a fade-out exit animation and a fade-in entrance animation prepared with the framer-motion package. The first thing we need to do is define and export the transition as a constant, in this case:

export const variantsPage = {
    initial: { opacity: 0, transition: { duration: 0.3, delay: 0.3 } },
    in: { opacity: 1, transition: { duration: 0.3, delay: 0.3 } },
    out: { opacity: 0, transition: { duration: 0.3, delay: 0.3 } }
};

Photo: Kyle Loftus

Then, in the App.tsx file, we import the framer-motion package and add the AnimatePresence component as a wrapper for the routes of our application:

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom"
import {AnimatePresence} from "framer-motion";

const App = () => {
    return (
        <div className="App">
            <BrowserRouter>
                <AnimatePresence>
                    <Routes>
                        <Route path={"/page1"} element={<Page1/>}/>
                        <Route path={"/page2"} element={<Page2/>}/>
                        <Route path={"/page3"} element={<Page3/>}/>
                        <Route path={"/page4"} element={<Page4/>}/>
                    </Routes>
                </AnimatePresence>
            </BrowserRouter>
        </div>
    );
}

export default App;