Motion: [BUG] Page links jumps to top of the page before exiting with Animate Pressence in Gatsby

[JonasWN]

* Describe the bug*

Might just be me overseeing something but When using Gatsby together with Animate Pressence the page will jump to the top before starting the exit animation

* IMPORTANT: Provide a CodeSandbox reproduction of the bug*

https://codesandbox.io/s/sharp-ardinghelli-jw5f9

From another gatsby issue that was fixed but im using the same browser config with animating pressence as this one.

* Steps to reproduce*

1. Scroll down abit so your not at the top
2. click the link to page 2 under the paragraph and you will see it scrolls to the top then fades out.

Expected behavior

I think it´s a Gatsby issue somehow but it would be nice if there was a solution to it not jumping to the top of the page before beginning to animate out.

[Bleuzen]

Same problem with Next.JS

Edit: for Next as a workaround you can disable the scroll to top for links:
https://nextjs.org/docs/api-reference/next/link#disable-scrolling-to-the-top-of-the-page
and handle scrolling in the onExitComplete event on AnimatePresence

[JonasWN]

Sadly not a option with Gatsby Link as far as i know :/ but nice you found out for NextJS!

[michaeljblum]

Try adding the following code to your gatsby-browser.js file:

export const shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  if (location.action === 'PUSH') {
    window.setTimeout(() => window.scrollTo(0, 0), transitionDelay);
  } else {
    const savedPosition = getSavedScrollPosition(location);
    window.setTimeout(
      () => window.scrollTo(...(savedPosition || [0, 0])),
      transitionDelay
    );
  }
  return false;
};

[JonasWN]

@michaeljblum That works like a charm! thank you appreciate the reply