Has anyone figured out how to do page transitions with <AnimatePresence> in Next 13.

[williamlmao]

I'm not sure if this is even possible, but I'm trying to recreate page transitions in Next 13.

I've tried wrapping around {children} inside of /app/layout.ts, but that doesn't seem to work. I can't really put in my /app/page.ts because it is a server component and I have to keep it that way because of async child components.

Would love to hear if anyone has found other solutions for this! Thanks.

[mosesoak]

@williamlmao Yes we're doing this, see #1771

This should work in other frameworks besides Next as well, just keep in mind that _app is a top-level page wrapper in Next.

1. <AnimatePresence> in _app without any special mode set on it
2. Which wraps a per-page Layout component with a key set on it that changes based on route <Layout key={router.asPath}>{children}</Layout>
3. The Layout's outer container needs to be set to position: absolute and then have z-indexes set based on the transition state. This can be done using variants. For example, in initial zIndex: 0, in animate zIndex: 1, in exit zIndex 2 -- or switch these around to reverse the overlap.
4. The actual visual transition can then just be run inside the Layout component. For example, animating a clipPath based mask.

Using this technique we're able to overlap pages. The post I mentioned above is asking whether there's any standard way to reset scroll during this kind of transition, something we solved on our own.

Hope this helps you and others! ✨

[williamlmao]

@mosesoak thanks for writing back! is your response still referring to Next 12? I think the _app.ts is a Next 12 thing, in next 13 theres /app/page.tsx, but it turns out that is no longer the root. /app/layout.tsx is the root because it wraps /app/page.tsx.

[dvartic]

I am facing the same issue. As per Next13 doc, I use Template with a motion component. Template should receive a key prop automatically. According to the same docs, Template is placed just after the last element in Layout, so I place AnimatePresence as that last element. However, it doesn't work.

Did you find a solution?

[Neomas]

I'm having the same issues. I tried your solution, but exit animations still seem broken...
Here's a sandbox of my attempt, maybe I've missed something: CodeSandBox Link

[danielfoxp2]

Has you guys found a way?

[Neomas]

Yes, but the issue seems to lie with Next and not with Framer motion. There is an issue open about it on their git https://github.com/vercel/next.js/issues/17464. At the bottom there's also a link to a package that should fix the issue. I haven't tried that one myself, but it seems promising.

Good luck!

[alexeigs]

No longer available.