I have a page where clicking on a link should land me on a different page after the exit animations of framer motion. The issue I'm facing is that the link is visible after scrolling down the page and upon clicking, the scroll goes to the top and then the exit animation takes place before the redirection.
Expected behavior:
- The exit animations to take place at the same scroll point where I clicked on the link.
My issue is exactly same as the one mentioned in this github issue (https://github.com/framer/motion/issues/626) but I'm using React 17.0.2, React router V6 and Framer-motion 4.1.17, hence linking the issue here.
Codesandbox link from the github issue:
https://codesandbox.io/s/sharp-ardinghelli-jw5f9
Steps to reproduce
- Scroll down a bit so you are not at the top
- click the link to page 2 under the paragraph and you will see it scrolls to the top then fades out.
I'm completely stuck to figureout a solution for this, so couldn't try other solutions