[BUG] AnimatePresence not working propery with Next.js routing

2. Describe the bug

When I’m trying to animate between different pages the exit animations don’t work properly, only the enter animation works. This problem only occurs in Next.js project. When using classic React Router the animations work normally. Moreover if I go from page /single/1 to /single/1 it doesn’t animate at all. When changing the base url e.g. /gallery to /single/1 only the enter animations work.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

React Router version that works https://codesandbox.io/s/framer-motion-x-react-router-5l6xd

Next.js version that doesn’t work https://codesandbox.io/s/cold-resonance-tyzh4

You can see that the animations are different in Next.js version, and if you click on Next button, it doesn’t animate at all.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to root
2. Click on image
3. It should scale down and transition to image detail, but the scale down animation doesn’t work as in React Router version
4. Click on Next button, it doesn’t animate at all

5. Expected behavior

It should animate also on exit and also when changing just index/id in the route

7. Environment details

MacOS Catalina, Chrome 80

Not sure if it’s because of some Next.js optimisations or because of SSR. Any help is appreciated 🙏🏻

[ronaldruzicka]

Great! Works like charm. Thanks a lot! 🙂

[imjoshellis]

I tried a few different ideas, but the only one I got to work properly is useState (again): https://codesandbox.io/s/next-js-framer-motion-oo2dd

The only line I changed was this on both [index].js files: const [currentPageIndex] = useState(Number(router.query.index) || 0);

Without using state, you’re changing the content of <PageDetailLayout> (ie <Page>) instantly when the route changes. Framer-motion was correctly holding the original component and animating it out, but what you see is this:

1. Route changes because Link was pressed
2. Page 1 content changes to the content of page 2 because the route changed (framer doesn’t deal with content changes, just component mount/unmount)
3. Page 1 animates out
4. Page 2 animates in

Using state allows for this:

1. Route changes because Link was pressed
2. Page 1 content doesn’t change even though the route changed
3. Page 1 animates out
4. Page 2 animates in