i guess this should work with any react application not just next js amazing work
@thearmbandit7645
2 ай бұрын
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.
@StormKittenMeow
2 ай бұрын
I was thinking about this and you just uploaded
@tomisloading
2 ай бұрын
Love when that happens 😁
@SanthoshKumar-dev
2 ай бұрын
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)
@richardlepeuriancross5193
2 ай бұрын
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.
@tomisloading
2 ай бұрын
Great idea!
@vaggelis_best
2 ай бұрын
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
@tomisloading
2 ай бұрын
Happy to help!! 😁
@ritikjangir718
Ай бұрын
This is what I was looking for. This is golden.
@aymenbachiri-yh2hd
Ай бұрын
Thank you so much Tom, please keep posting videos like this
@user-nb7sk4go9e
2 ай бұрын
Bro literally upload video as soon as I needed it. Subscribed :)
@tomisloading
2 ай бұрын
Haha thank you!! 😁
@reubence_
2 ай бұрын
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.
@k0wal454
Ай бұрын
it is nice to support people like u. keep up the good work
@BooksWeCanRead
2 ай бұрын
That was awesome! So well explained! 🙌👏👏
@tomisloading
2 ай бұрын
Thank you! 😁
@visheshjhadi1930
Ай бұрын
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
@neociber24
2 ай бұрын
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.
@VitorVelosoSA
Ай бұрын
Correct. And I believe this one of the most confusing things among the community in NextJS.
@ProLactationNation
Ай бұрын
Man.. If i would have the authority, I would give you a medal!
@MortezaPorabdolahi
Ай бұрын
Amazing stuff, Thanks ♥
@RobbPage
2 ай бұрын
animate presence has always given me issues. will give this method a try. thanks!
@tomisloading
2 ай бұрын
Same here!! Happy to help 🙂
@xphstos_
Ай бұрын
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?
@caczus
Ай бұрын
You should try the next-view-transitions library from shuding
@M1a2n3o43
2 ай бұрын
Could you add some of these popular transition animations to your website? Great video!
@tomisloading
2 ай бұрын
Potentially, yea! A bit tough to do though given different routers will require different solutions
@ayannagorimsn
2 ай бұрын
@@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
@Deus-lo-Vuilt
2 ай бұрын
Wow , Thanks for video
@nothing-tj9eh
2 ай бұрын
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
@tomisloading
2 ай бұрын
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 😁
@KarnakOvy8
2 ай бұрын
you can also use the template.tsx component, which is like a layout, but re-render every time
@JacquesOP
2 ай бұрын
Amazing work !
@Smartercow
Ай бұрын
Instead of the sleep function there's this: *import { setTimeout } from "node:timers/promises";* - It does the same and it's async
@habibthephantom7040
Ай бұрын
But this is client component not server one
@trejohnson7677
Ай бұрын
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?
@tomisloading
2 ай бұрын
It could! Another solution could be to have your links handle only exit animations, then have each individual page handle their own entrance animations
@moodyhamoudi
2 ай бұрын
@@tomisloading ur cooking bro
@KillerPhantom123
2 ай бұрын
This is gold!
@chopsueey
2 ай бұрын
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?
@ayannagorimsn
2 ай бұрын
I dont think it is needed We can use a button or a tag as well I did it with button only
@chopsueey
2 ай бұрын
@@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
@MauricioAndrian
2 ай бұрын
Using buttons for page navigation breaks a11y. Try Ctrl/Cmd + Left Click in both and you'll see.
@amansarma417
2 ай бұрын
Would this approach work if the user clicks back button after navigating to the page made by custom link component?
@MauricioAndrian
2 ай бұрын
No, this only run 'onClick'ing the component. Anything else, won't work.
@amansarma417
2 ай бұрын
@@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.
@aliventurous
Ай бұрын
@@amansarma417please share
@abdrahmanoladimeji4698
Ай бұрын
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?
@inderjotsingh5868
Ай бұрын
i have seen people doing page transitions using template.ts file in next , do we have any performance implications using that ?
@tomascaetano4270
Ай бұрын
This is done.
@sahilverma_dev
2 ай бұрын
Finally
@tomisloading
2 ай бұрын
😎
@alexg7282
2 ай бұрын
Thanks !
@jou3883
Ай бұрын
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.
@ibnurasikh
2 ай бұрын
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?
@tomisloading
2 ай бұрын
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.
@ibnurasikh
2 ай бұрын
@@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)`?
@alishakhatri6919
Ай бұрын
hey, can you make a video about Opposite Scroll Content ?
@nandanchoudhary9798
2 ай бұрын
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
@null_spacex
Ай бұрын
There's a difference between applications and websites.
@tretiakdev
Ай бұрын
Cool ❤
@MauricioAndrian
2 ай бұрын
What about the new native page transitions animations? Do they work?
@TutoDS2014
2 ай бұрын
Do you know a good tutorial to do animations on solid (using solid start)?
@felipefregginrules
2 ай бұрын
This obvi works on the pages router too right?
@tomisloading
2 ай бұрын
It does!
@TrungNguyen-fi5ls
Ай бұрын
I thought we couldn't manipulate DOM ??? 8:23
@user-fr9we8vq7x
2 ай бұрын
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!
@MauricioAndrian
2 ай бұрын
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.
@PrinzEugen39
Ай бұрын
SEO this SEO that
@DouglasSouza-te9bt
2 ай бұрын
Theme pls
@zlatkoiliev8927
2 ай бұрын
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…
@richardlepeuriancross5193
2 ай бұрын
Use the next link inside Transition link?
@youhabbo01
2 ай бұрын
@@richardlepeuriancross5193 e.preventDefault ?
@fathinfadhil
2 ай бұрын
he literally pass down the props to next's Link component, it'll work fineee
@waleedbukhari8988
Ай бұрын
@@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.
@sebastiancasal8589
Ай бұрын
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
@alex_maltsev_k2fx
3 күн бұрын
IMO, this solution will not work when the user uses the browser back button.
@nicolasmayorga8288
2 ай бұрын
I mean, it's good but not recommended cause in this way you're not getting pre-fetching and caching data in each link.
@ashishkumawat6110
Ай бұрын
That's just vanilla JS stuff
@null_spacex
Ай бұрын
But it's the way to do it in Next App Router right now..
@uditnagar7905
2 ай бұрын
ezsnippet copied today's insta reel from here 🤣🤣🤣
@znkdev
2 ай бұрын
pretty dope! but way too much work.
@RegalWK
Ай бұрын
Does this new TransitionLink component support prefetching? I assume yes since its native Link component with use client directive
Пікірлер: 94