How can you handle route transitions with animations

Question

With the help of proper code can you tell me How can you handle route transitions with animations?

Answer 1

You can use Framer Motion with React Router to animate route transitions.

Steps to Implement:

Install Framer Motion:

npm install framer-motion

Wrap Routes with AnimatePresence:

import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";

import { AnimatePresence, motion } from "framer-motion";

import Home from "./Home";

import About from "./About";

const pageVariants = {

  initial: { opacity: 0, y: -10 },

  animate: { opacity: 1, y: 0, transition: { duration: 0.5 } },

  exit: { opacity: 0, y: 10, transition: { duration: 0.5 } },

};

const AnimatedRoutes = () => {

  const location = useLocation();

  return (

    <AnimatePresence mode="wait">

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

        <Route path="/" element={<motion.div {...pageVariants}><Home /></motion.div>} />

        <Route path="/about" element={<motion.div {...pageVariants}><About /></motion.div>} />

      </Routes>

    </AnimatePresence>

  );

};

function App() {

  return (

    <Router>

      <AnimatedRoutes />

    </Router>

  );

}

export default App;