Can't get shared layout animations to work with Next.js 13 #1850
Comments
maurocolella
changed the title
|
yo I also have this issue in Next js . I solved it for my first time use but , I deleted that animation . Now I want to enable in next js and issue happening . |
|
Hi there, that source code link isn’t working for me. Please reopen with a sandbox or repo |
|
@mattgperry was private, sorry. Here is the sandbox: |
|
That is weird although I think I have them working here https://codesandbox.io/p/sandbox/charming-pine-zz12kx |
|
When I've got a bit more time I can look into this, there's definietly something different about Next 13 |
|
Thanks a lot @mattgperry . It's early days for this project, and it's going to undergo some changes (maybe Remix, some css tweaks, and I will definitely lose the cheerio parsing once I connect it with a CMS back-end), but I thought I'd raise it as an edge case. I am not blocked by all means, and if I figure out why it's working this way I'll be happy to share back. Appreciate the help. |
|
Hey folks, I'm running into the same issue here. I'm not sure how to even wrap Here's how I've currently implemented my One of the biggest errors I'm getting is: |
Your example uses the There are seemingly a couple of issues with transitions. Most notable: the exit animations do not work (see video). I'm not sure whether the issue is with Framer or with Next. Next does seem to unmount the layout immediately upon navigation. I've tried adding The props on the component doing the transition are: initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 100 }}
transition={{ duration: 2 }}
key={pathname}Screen.Recording.2023-01-18.at.11.05.16.mov |
|
Per #1775 (reply in thread) I have also tried using a |
|
Worth noting that I have organized my client/server components in a
peculiar way to work around apparent bundling issues.
This is related to cheerio as mentioned (which I will drop soon).
That being said, I don't think I am working against either framework, and I
might raise an issue with the Next team for their feedback.
…On Wed, Jan 18, 2023, 6:20 PM Mike Ekkel ***@***.***> wrote:
Per #1775 (reply in thread)
<#1775 (reply in thread)>
I have also tried using a template.tsx file but that doesn't seem to work
either, even though the Next docs specifically mention transitions to be a
use-case for it:
https://beta.nextjs.org/docs/routing/pages-and-layouts#templates.
—
Reply to this email directly, view it on GitHub
<#1850 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAFZ7NBNFOOSD6OXYA5ZNQDWS67YFANCNFSM6AAAAAATJVFL2I>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
I have the same kind of issue in the Next 13. In the Root Layout, which is a server component, I have this: In Main (client component) I have this: In Inner (client component as well): I added Freeze(react-freeze) as a workaround, but I don't like it. It seems that both (the new component + the existing one) point somehow to the same component. |
This is, presumably, solved using
|
|
After reading the Next.js v13 docs regarding the new Templates feature, I tried it out to house page-transition Framer Motion code. Unfortunately the exit animation does not work (it's just completely ignored). This is the file that contains my page-transition code. Also see my template.tsx and layout.tsx file for more context. |
|
Another finding: When using |
|
@Murkrage Some time ago I tried to use template.js but it didn't work. i will try again. @jasonkylefrank For me the exit animation works. in the inner component please use: Now, the problem is that the old component and the new one are pointing to the same instance (they are the same component). I also find that the old component sometimes it doesn't get unmounted. Screen.Recording.2023-02-06.at.11.45.40.PM.mov |
|
I have it working for like 90%. The animation on Exit is or too fast loading animate-in or the exit is is too fast or too slow. The exit and enter works... but still works better using "pages" instead of the new "app" directory. layout.tsx: |
|
I got exit animation to work using // client.tsx
'use client'
import { motion, AnimatePresence } from 'framer-motion'
import { usePathname } from 'next/navigation'
// Client wraps any client/rsc components with AnimatePresence
export default function Client({children}: { children: ReactNode}) {
const pathname = usePathname()
return <AnimatePresence mode='wait' onExitComplete={doYourThing}>
<motion.div key={pathname}
initial={{}}
animate={{}}
exit={{}}
>
{children}
</motion.div>
</AnimatePresence>
}// layout.tsx, this should ideally be `rsc`, so don't use `use client`
import Client from './client'
export default function Layout({children}: { children: ReactNode}) {
return <Client>{children}</Client>
}
|
|
@khuezy in my instance |
|
@beamercola hmm, what does your app structure look like? My solution is a hack until they fix |
|
@khuezy What is your framer-motion version? |
|
@dumbravaandrei22 I'm using 9.0.3, I'll update to latest and let you know. Although the example above gets exit animations to work, the current problem is that nextjs replaces the contents before the exit animation plays. I believe once |
|
Understood! |
|
@khuezy I tried this: #1850 (comment). Is working, but it seems that the loading UI has a delay. |
|
Ah I see, sorry missed your comment up there. We have the exact same problem. |
In order to do native JS css anim we need routing guards which has been removed or planned to come in the app dir. Also, even without framer you would still need to hack things around. I honestly prefer to wait for issue to be fixed on next js. |
Thank's for reply. What I am thinking about (which is of course hacking things around) - is assigning an ID to children, that should be wrapped by Framer Motion / any other "delay component unmount" and using portal, wouldn't it do the trick? |
|
@pzpsofficial I will turn off notifications for this thread after this reply, as I receive my fair share of notifications and cannot keep up with everything, but the actual standards of internet and front-end dev should always be CSS, HTML and ECMAscript first. By that I mean: it's critical to have a good grasp on them, and frameworks are just sugar coating. That said, people do rely on Framer Motion because it abstracts these away, and simplifies the task of translating a visual effect into CSS/JavaScript under the hood, but it's really (almost) all that it does. Does it very nicely, but still. Whether using Vue or Next or any other framework, any effect you see can be accomplished using web standards. Here using pure CSS. It is not optimal, but it is pure CSS: Here is another example that uses more elegant coding techniques along with a step-by-step breakdown: Also, visual effects like this do not and should not depend on routing, but on user interaction (so you could trigger them independently on separate events as well, like mouseenter/mouseleave). Effects are a styling concern, independently from routing, navigation, or content. Either should be able to work without the other. Finally, I found this by searching for "sliding underline nav" on Google - Google is adaptive, returns results based on what you were searching before. Hence: keep it simple. Back to basics works. |
|
Thanks for reply, I think there was a misunderstanding as I had page transitions in mind the whole time. In cases like this simple underline the basics are even more than enough ;) Kind regards, |
|
Hi everyone, Check it out, might be useful. using
The thread itself has a working example, but I've implemented a solution with much less code as well. My working example (it is a frontendmentor.io challenge solution) This is the FrozenRouter implementation that makes exit animations possible Here is where the FrozenRouter component is being used I hope this is helpful to all facing this issue. |
|
Feels like npostulart is right in their asessment that this feels hacky but it does seem to work pretty well. Has anybody tried this in the wild and found any weirdness or conversely that it just works with no real issue? |
|
@joshdavenport I’ve added a personal example to my comment, where I’ve used it for a page transition itself, it does seem to work perfectly fine. |
|
Indeed @Gaurav4604, it's your example that triggered me wondering about it - seeing more people use the technique I mean. I'm wondering if anybody has managed to try this in prod in an app with many moving parts, complex routing, complex state, etc. |
|
Ah ok, that makes sense, I'll let you all know via this thread if I do so myself as well. Does seem to get the job done for time-being. |
The biggest concern is more so that the technique uses code that isn’t publicly exported from nextjs, which would mean it’s not intended for anything but internal use. A minor or patch update could break this functionality without notice under semver. |
|
Just a follow up, I'm trying this approach in Next 13.5 which just came out today and I'm finding that any components underneath the Frozen Router Component won't update via HMR which makes it pretty much unusable. |
@cdebotton I just updated my import for frozenRouter for it to work with AnimatePresence on nextJS 13.5.1, |
Ouch. Yes, this is a deal breaker. I guess not too bad if you're only working on something small but for anything else this drastically affects the development experience. Seems like we're in a kind of limbo with this, framer obviously can't change what Next is doing, and there's not really been any movement on the Next side on this (vercel/next.js#49279) which is a shame but understandable - they have more demanding priorities for sure. |
|
Hi there! Whereas this solution worked fine for me to get page transitions to work with Next.js 13, I am getting the following error from Framer Motion's AnimatePresence & PopChildMeasure. Any fixes existing to avoid this error? The lifecycle of animations is working fine, just the error is being thrown. |
|
@baptistebriel Check the new version of the Child with the forwardRef here https://github.com/npostulart/nextgram-with-page-transitions/blob/main/src/app/ClientLayout.tsx#L12 😄 |
Take a look at the docs for the same |
|
Thank you @Frumba and @Gaurav4604 — that worked, thank you for the quick reply. |
|
Hello. |
just tried with 13.5.3 and "framer-motion": "^10.16.4", |
|
Actually i got an idea and it quite a bit not a hacky solution, 1 for exit, i use setTimeOut() to create a delay before it actually changes in url, and when the url changed, i use useEffect to change the state again to hide that exit component.
|
|
Here's my experimental branch of next.js that enables exit transitions with Draft PR: vercel/next.js#56591 The final solution in |
|
Has anyone tried this with NextJS 14? |
yes -- issue still present in |
|
Closing here as framework-specific integrations isn't something I'm going to concentrate on this year. |
and others
1. Read the FAQs 👇
2. Describe the bug
With Next 13, using separation between server and client components, shared layout animations don't work when implementing the seemingly trivial navigation menu underline. Using either the deprecated or the modern approach (ie.
layoutIdon the target components).3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
This issue could be heavily dependent upon styles and nesting(s). The structure honors HTML and React semantics, but it runs complex animations. Hence: the repro is complete, interactive, commentable and with full source code.
Live:
https://portfolio-2023-git-feature-implement-layout-maurocolella.vercel.app/
Implementation: https://github.com/maurocolella/portfolio_2023/pull/2/files#diff-f7c999b982bfdbf5f3790e5b148e2343ffb7611b9ba579756dabab9fc76cb2e7
4. Steps to reproduce
On the example page:
https://portfolio-2023-git-feature-implement-layout-maurocolella.vercel.app/
Simply click navigation items. Transition doesn't take place.
5. Expected behavior
I would expect a smooth transition to occur as in the examples.
6. Video or screenshots
N/A.
7. Environment details
Ubuntu Linux 20.04, Chrome beta, Chrome stable, Firefox.
FAQs
Framer Motion won't install
Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.
height: "auto"is jumpingAnimating to/from
autorequires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.The recommended solution is to move padding to a child element. See this issue for the full discussion.
Type error with
AnimateSharedLayoutAnimateSharedLayoutwas deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.Preact isn't working
Framer Motion isn't compatible with Preact.
AnimatePresenceisn't workingHave all of its immediate children got a unique
keyprop that remains the same for that component every render?Is the
AnimatePresencecorrectly outside of the controlling conditional?AnimatePresencemust be rendered whenever you expect anexitanimation to run - it can't do so if it's unmounted!The text was updated successfully, but these errors were encountered: