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)
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
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.
That sounds great! It will transition each page based on the pathname. However, since the transition occurs after the pathname changes (when the page has already loaded), we need the transition to happen before the page loads. This makes Tom’s approach smoother
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
Great workaround! However, this only works if the page transition is triggered by clicking this new Link component. If the page transition happens via browser navigation (like pressing the back button) or any other way, this won't work, and hence, the UX is inconsistent. Listening to the pathname changes and triggering the animation would be a more consistent approach.
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 😁
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.
It could! Another solution could be to have your links handle only exit animations, then have each individual page handle their own entrance animations
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!
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.
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)`?
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.
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
I've been busting my ass trying to do a basic page exit animation for 3 hours now. Coming to NextJS from SvelteKit there is just one word I can describe NextJS with - Trash.
i guess this should work with any react application not just next js amazing work
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.
great workaround for the framer motion / next js page transition issues
I was thinking about this and you just uploaded
Love when that happens 😁
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)
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
Happy to help!! 😁
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.
Great idea!
That sounds great! It will transition each page based on the pathname. However, since the transition occurs after the pathname changes (when the page has already loaded), we need the transition to happen before the page loads. This makes Tom’s approach smoother
This is what I was looking for. This is golden.
Thank you so much Tom, please keep posting videos like this
Great tutorial.
A correction "use client" just means the element may be interactive on the client, in NextJS all elements are rendered on the server.
Correct. And I believe this one of the most confusing things among the community in NextJS.
Bro literally upload video as soon as I needed it. Subscribed :)
Haha thank you!! 😁
it is nice to support people like u. keep up the good work
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.
That was awesome! So well explained! 🙌👏👏
Thank you! 😁
Amazing stuff, Thanks ♥
Amazing work !
You should try the next-view-transitions library from shuding
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
thank you tom
Wow , Thanks for video
Could you add some of these popular transition animations to your website? Great video!
Potentially, yea! A bit tough to do though given different routers will require different solutions
@@tomisloading Please make one of the animation free(I would love to buy it but I cant afford it). And others paid if you want
animate presence has always given me issues. will give this method a try. thanks!
Same here!! Happy to help 🙂
Great workaround! However, this only works if the page transition is triggered by clicking this new Link component. If the page transition happens via browser navigation (like pressing the back button) or any other way, this won't work, and hence, the UX is inconsistent. Listening to the pathname changes and triggering the animation would be a more consistent approach.
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?
yooo dog. i was waiting for this. thx
This is gold!
thankss for the tutorail can you give us small example how to set it up with framer motion cause i couldn't get it to work with app router
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 😁
you can also use the template.tsx component, which is like a layout, but re-render every time
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.
Really smart solution. Question though, would the fixed sleep times cause issues for slow connections?
It could! Another solution could be to have your links handle only exit animations, then have each individual page handle their own entrance animations
@@tomisloading ur cooking bro
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!
You are already breaking SEO (adding "use client") if you try to style the links based on current pathname which is required in 90% of all designs.
SEO this SEO that
2 things
"Auto Rename Tag" plugin
"trigger suggest" keyboard shortcut (usually ctrl + space)
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?
I dont think it is needed
We can use a button or a tag as well
I did it with button only
@@ayannagorimsn ah, good to know, thx
the docs say that the Link-component provide prefetching for the route in nextjs, so probably better to use it
Using buttons for page navigation breaks a11y. Try Ctrl/Cmd + Left Click in both and you'll see.
Does this animation work when hitting the back button on the mouse or browser?
Thanks !
Would this approach work if the user clicks back button after navigating to the page made by custom link component?
No, this only run 'onClick'ing the component. Anything else, won't work.
@@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.
@@amansarma417please share
Great video. Loved it! I did run into an error though. ReferenceError: TransitionLink is not defined. Any ideas on how I can fix this?
Instead of the sleep function there's this: *import { setTimeout } from "node:timers/promises";*
- It does the same and it's async
But this is client component not server one
This is done.
to explain the idea it's good But, No real world application uses such approach. it's not necessary that new page would load within 500ms
There's a difference between applications and websites.
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)`?
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 have seen people doing page transitions using template.ts file in next , do we have any performance implications using that ?
What about the new native page transitions animations? Do they work?
Finally
😎
This obvi works on the pages router too right?
It does!
Do you know a good tutorial to do animations on solid (using solid start)?
Cool ❤
IMO, this solution will not work when the user uses the browser back button.
hey, can you make a video about Opposite Scroll Content ?
I mean, it's good but not recommended cause in this way you're not getting pre-fetching and caching data in each link.
I thought we couldn't manipulate DOM ??? 8:23
Theme pls
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…
Use the next link inside Transition link?
@@richardlepeuriancross5193 e.preventDefault ?
he literally pass down the props to next's Link component, it'll work fineee
@@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
I've been busting my ass trying to do a basic page exit animation for 3 hours now.
Coming to NextJS from SvelteKit there is just one word I can describe NextJS with - Trash.
That's just vanilla JS stuff
But it's the way to do it in Next App Router right now..
pretty dope! but way too much work.
ezsnippet copied today's insta reel from here 🤣🤣🤣
Thanks!