title: Troubles animating react-router with framer-motion
body: <p>I'm trying to add some animations and smoothness to an app with Framer-motion and I'm struggling to make it all work.</p>
  <p>Using react-router 6, I want to trigger some exit animations on route sub-components when the url changes. Following <a href="https://dev.to/sam_piggott/using-framer-motion-to-make-page-transitions-in-react-5ma" rel="nofollow noreferrer">this tutorial</a>, here is what I got for the main layout :</p>
  <pre><code>export default function MainWrapper() {
    const location = useLocation();
    return (
      &lt;Main&gt;
        &lt;AnimatePresence exitBeforeEnter initial={false}&gt;
          &lt;Routes key={location.pathname}&gt;
            &lt;Route path=&quot;/&quot; element={&lt;Dashboard /&gt;} /&gt;
            &lt;Route path=&quot;project/:id/*&quot; element={&lt;Project /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/AnimatePresence&gt;
      &lt;/Main&gt;
    );
  }
  </code></pre>
  <p>The pages <code>Dashboard</code> and <code>Project</code> are build using some composition of Antd's Row and Col system. I want to animate Row's children to appear one after the other on mount, and to disappear one after the other on unmount :</p>
  <pre><code>import React, { ReactNode } from &quot;react&quot;;
  import { Card, Col, Row } from &quot;antd&quot;;
  import { motion } from &quot;framer-motion&quot;;
  
  // Section
  
  type SectionProps = {
    title?: ReactNode;
    extra?: ReactNode;
    children?: ReactNode;
    span?: number;
  };
  
  export default function Section({
    title,
    extra,
    children,
    span = 24
  }: SectionProps) {
    return (
      &lt;MotionCol span={span} variants={colVariant}&gt;
        &lt;Card title={title} extra={extra}&gt;
          {children}
        &lt;/Card&gt;
      &lt;/MotionCol&gt;
    );
  }
  
  // Section.Group
  
  type GroupProps = {
    children?: ReactNode;
  };
  
  Section.Group = function({ children }: GroupProps) {
    return (
      &lt;MotionRow
        gutter={[24, 24]}
        variants={rowVariant}
        initial=&quot;hidden&quot;
        animate=&quot;show&quot;
        exit=&quot;close&quot;
      &gt;
        {children}
      &lt;/MotionRow&gt;
    );
  };
  
  // Framer stuff
  
  const MotionRow = motion(Row);
  const MotionCol = motion(Col);
  
  const transition = { duration: 0.4, ease: [0.43, 0.13, 0.23, 0.96] };
  
  const rowVariant = {
    hidden: {},
    show: {
      transition: {
        staggerChildren: 0.1
      }
    },
    close: {}
  };
  
  const colVariant = {
    hidden: { opacity: 0, x: 20, transition },
    show: { opacity: 1, x: 0, transition },
    close: {
      opacity: 0,
      x: -20,
      transition
    }
  };
  
  </code></pre>
  <p><code>Dashboard</code> is then built using these blocks :</p>
  <pre><code>&lt;Section.Group&gt;
    &lt;Section&gt;
      First section...
    &lt;/Section&gt;
    &lt;Section&gt;
      Second section...
    &lt;/Section&gt;
  &lt;/Section.Group&gt;
  </code></pre>
  <p><strong>The issue</strong> : Only <code>hidden</code> and <code>show</code> work. Not <code>close</code>. There is no exit-animation when leaving a page. How could I solve this ? Thank you.</p>