title: How to Navigate and Scroll to an Element with ID in a Next.js Page wrapped with AnimatePresence
body: <p>I am using <a href="https://github.com/framer/motion" rel="noreferrer">Framer Motion</a> to animate <a href="https://nextjs.org/" rel="noreferrer">Next.js</a> page transitions. However using the using <a href="https://www.framer.com/api/motion/animate-presence/" rel="noreferrer">AnimatePresence</a> breaks the <code>hash</code> link navigation and the page no longer goes to the targeted <code>id</code> element.</p>
  
  <p>The page transitions are perfect until you want to navigate to a harsh ID on the page :(</p>
  
  <pre><code>// I have a link component setup like this
  // index.tsx
  &lt;Link href="/about#the-team" scroll={false}&gt;
    &lt;a&gt;The Team&lt;/a&gt;
  &lt;/Link&gt;
  
  // Targeting another page `about.tsx` with the id
  // about.tsx
  
  {/* ...many sections before.. */}
  &lt;section id="the-team"&gt;{content}&lt;/section&gt;
  </code></pre>
  
  <p>I have a custom <code>_app.tsx</code> as shown below. </p>
  
  <pre><code>// _app.tsx
  import { AppProps } from 'next/app';
  import { useRouter } from 'next/router';
  import { AnimatePresence } from 'framer-motion';
  
  const MyApp = ({ Component, pageProps }: AppProps): JSX.Element =&gt; {
    const router = useRouter();
    return (
      &lt;AnimatePresence exitBeforeEnter&gt;
        &lt;Component {...pageProps} key={router.route} /&gt;
      &lt;/AnimatePresence&gt;
    );
  };
  
  export default MyApp;
  
  </code></pre>
  
  <p>I am expecting to go directly to the section with <code>id="the-team"</code> but it won't work. A refresh of the page with the hash link shows that it's originally at the target element but quickly jumps to the top. It's so fast and easy to miss. How do I retain the page transitions but still be able to navigate to hash id?</p>