Animating components as they enter and leave the React component tree can make your interfaces feel much smoother and more polished. Framer Motion provides the AnimatePresence component to help you animate components when they are mounted or unmounted. Normally, when a component is removed from the React tree, it disappears instantly. With AnimatePresence, you can trigger exit animations before the component is fully removed. To use it, wrap your conditional components or route-based content with AnimatePresence. This way, when a component leaves, Framer Motion gives it time to animate out, using the exit prop you define on your motion elements. This is especially useful for modals, overlays, or entire pages when building multi-route apps.

Suppose you have a multi-page React app using React Router, and you want to animate transitions between pages. Wrap your routes' content with AnimatePresence, and use motion.div with initial, animate, and exit props. For example:

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

function App() {
  const location = useLocation();

  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route
          path="/"
          element={
            <motion.div
              initial={{ opacity: 0, x: -100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 100 }}
              transition={{ duration: 0.5 }}
            >
              <Home />
            </motion.div>
          }
        />
        <Route
          path="/about"
          element={
            <motion.div
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.5 }}
            >
              <About />
            </motion.div>
          }
        />
      </Routes>
    </AnimatePresence>
  );
}

This setup ensures that when you navigate between routes, the outgoing page animates out and the incoming page animates in, creating a seamless transition. Adjust the animation props to fit your design and user experience needs.