I am using Framer Motion to animate Next.js page transitions. However using the using AnimatePresence breaks the hash
link navigation and the page no longer goes to the targeted id
element.
The page transitions are perfect until you want to navigate to a harsh ID on the page :(
// I have a link component setup like this
// index.tsx
<Link href="/about#the-team" scroll={false}>
<a>The Team</a>
</Link>
// Targeting another page `about.tsx` with the id
// about.tsx
{/* ...many sections before.. */}
<section id="the-team">{content}</section>
I have a custom _app.tsx
as shown below.
// _app.tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { AnimatePresence } from 'framer-motion';
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
const router = useRouter();
return (
<AnimatePresence exitBeforeEnter>
<Component {...pageProps} key={router.route} />
</AnimatePresence>
);
};
export default MyApp;
I am expecting to go directly to the section with id="the-team"
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?