This is absolutely an amazing guide with an upload that is PERFECTLY timed. I've spent the last 2 days banging my head against the wall with these page transitions and now I can finally move forward and focus on working with framer motion on smaller things You are a true hero.
me too i just think like 5 hours before... man ru really witch or something... KUDOS TO THE GOOD WORK !!!!!! PLEASE DONT STOP POSTING VIDEOS !!!!!!! i will sponsor u if u want (i am broke)
Eyyy. This cheered me up as was almost exactly the approach i took. Rather than remove the class via TransitionLink, consider an effect hook (useEfrect) which reacts to the pathname changing (usePathname). That was you ensure the page has loaded before you show it.
I my god this is probably the best solution I have seen in tackling this problem. Well, it might also be the only complete one I have seen! Thank you very much
Did something similar using the web transitions api - but was disappointed after I realised it doesn’t work on safari yet. This seems like a better approach. Heck it’s so easy I’m almost dumbfounded at myself for not figuring it out on my own.
There are few issues with this approach 1. SEO as all the links will be on client side then server side 2. The back and forward button will not trigger the transition 3. If you go to network tab and slow the throttling then you will notice that the transition starts and end on the same page. If anyone have the solution to this please let me know
Interesting, have you ever thought about making the sleep function and transition handler a generator? Think making the animations dependent on e.g. TTP, network parameters? So if you're on a crap network you could procedurally generate an interesting animation to distract them from DNS issues.
Great idea! Thanks! Quick question, since we're preventing the default event and using the router hook to navigate the user is there a reason we used specificaly the Link component? Couldn't that work also with a normal ancor element or a button or even a simple div?
I’ve personally just stopped using Framer Motion for page transitions with the app router, at least with animate presence. If you wanted to use something like useAnimate, you could add a ref to the body element then pass it down through context or something I suppose 😁
It could! Another solution could be to have your links handle only exit animations, then have each individual page handle their own entrance animations
awesome! but couldn't you just use a button element instead of the nextjs link-component, because you are essentially using a programmatical approach for page-navigation (useRouter)? or is next/link still beneficial or necessary?
@@MauricioAndrian I've implemented my own solution using a custom hook which runs on every page navigation via useEffect and ads a layer of transition.
Hi, pls if I want to use this to create a kind of preloader, different from default Next Loading file whereby it'll override everything and get displayed first, how do I go about it?
Hi Tom! I implemented this in my current nextjs project. Somehow if I call the sleep function before removing the 'page-transition' class, it doesnt navigate to the page I clicked on immediately (which is what its supposed to do since we setTimeout to 500ms), but the previous page is still being displayed by like 2s before the page that is clicked on shows. But when I removed the sleep function after router pushes to clicked href, it worked. could this be a nextjs bug? or I'm doing something wrong? This only happens when I refresh the page and quickly navigates to other pages.
I was also thinking about this, but there's a potential issue. The method might exhibit strange behavior if the content doesn't prefetch. This could cause a noticeable pause after the animation finishes, as the new page content has to be fetched and rendered, right?
True, that was the idea with additional wait after redirecting to a new page. If you DID see this becoming an issue, I would just have each page define their own entrance animations so that they only occur once the page actually loads.
@@tomisloading Hmm, I think you should prefetch before the exit animation starts. In your code, fetching seems to happen after the animation ends, i.e., after `sleep(500)` finishes. Is there a reason you’re not implementing prefetch first using `router.prefetch(url, as, options)`?
This can really hurt the seo, as you are removing all of the links from server side rendering. I would do some king of a nested client component inside a server component, so that the link is actually rendered on the server, and then the client adds transition logic on top of it. Great tutorial!
Aaand this is really bad practice, because we loose all good features of the next link, like pre-fetching, and caching. Only because we want to have cool transition animations…
@@richardlepeuriancross5193at some point he is right, link works fine as a server component while transition link is a custom client component, you do loose preloading and some next features i guess. Use it wisely. Even if it is a nextlink. But it has a client wrapper on it.
But he is using next link, he is just adding a momentary modification of the pre rendered dom, the main component still are pre rendered in the server. It shouldn’t impact in the performance of the site
