How To Add Page Transitions To NextJS 14 (including Exit Animations)

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Today we're going to check out how to create custom, flexible page transitions with the NextJS 14 app router. We'll do this without any fancy animation framework tricks. We will write our code in a way that it can be reused and built upon such that each of your pages can selectively animate however you need them to (including not at all!).
📚 Project Links
Code: github.com/TomIsLoading/next-...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: www.hover.dev
Timeline:
0:00 - Introduction
0:23 - Project overview
2:09 - Creating a custom link component
4:01 - Preventing default link behavior
6:42 - Adding our animation

[@youssefkhaled2113]

i guess this should work with any react application not just next js amazing work

[@thearmbandit7645]

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.

[@ritikjangir718]

This is what I was looking for. This is golden.

[@aymenbachiri-yh2hd]

Thank you so much Tom, please keep posting videos like this

[@k0wal454]

it is nice to support people like u. keep up the good work

[@user-nb7sk4go9e]

Bro literally upload video as soon as I needed it. Subscribed :)

[@tomisloading]

Haha thank you!! 😁

[@JacquesOP]

Amazing work !

[@MortezaPorabdolahi]

Amazing stuff, Thanks ♥

[@BooksWeCanRead]

That was awesome! So well explained! 🙌👏👏

[@tomisloading]

Thank you! 😁

[@StormKittenMeow]

I was thinking about this and you just uploaded

[@tomisloading]

Love when that happens 😁

[@SanthoshKumar-dev]

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)

[@bozzhik]

yooo dog. i was waiting for this. thx

[@Deus-lo-Vuilt]

Wow , Thanks for video

[@temitopedavid9508]

thank you tom

[@vaggelis_best]

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]

Happy to help!! 😁

[@KillerPhantom123]

This is gold!

[@reubence_]

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.

[@richardlepeuriancross5193]

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]

Great idea!

[@alexg7282]

Thanks !

[@ProLactationNation]

Man.. If i would have the authority, I would give you a medal!

[@tretiakdev]

Cool ❤

[@caczus]

You should try the next-view-transitions library from shuding

[@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?

[@RobbPage]

animate presence has always given me issues. will give this method a try. thanks!

[@tomisloading]

Same here!! Happy to help 🙂

[@neociber24]

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.

[@tomascaetano4270]

This is done.

[@M1a2n3o43]

Could you add some of these popular transition animations to your website? Great video!

[@tomisloading]

Potentially, yea! A bit tough to do though given different routers will require different solutions

[@ayannagorimsn]

@@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

[@nothing-tj9eh]

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]

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]

you can also use the template.tsx component, which is like a layout, but re-render every time

[@RegalWK]

Does this new TransitionLink component support prefetching? I assume yes since its native Link component with use client directive

[@sahilverma_dev]

Finally

[@tomisloading]

😎

[@TutoDS2014]

Do you know a good tutorial to do animations on solid (using solid start)?

[@moodyhamoudi]

Really smart solution. Question though, would the fixed sleep times cause issues for slow connections?

[@tomisloading]

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]

@@tomisloading ur cooking bro

[@MauricioAndrian]

What about the new native page transitions animations? Do they work?

[@ikirbz]

2 things "Auto Rename Tag" plugin "trigger suggest" keyboard shortcut (usually ctrl + space)

[@alishakhatri6919]

hey, can you make a video about Opposite Scroll Content ?

[@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 ?

[@chopsueey]

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]

I dont think it is needed We can use a button or a tag as well I did it with button only

[@chopsueey]

@@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]

Using buttons for page navigation breaks a11y. Try Ctrl/Cmd + Left Click in both and you'll see.

[@ibnurasikh]

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]

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]

​@@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)`?

[@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.

[@amansarma417]

Would this approach work if the user clicks back button after navigating to the page made by custom link component?

[@MauricioAndrian]

No, this only run 'onClick'ing the component. Anything else, won't work.

[@amansarma417]

@@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

[@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

[@felipefregginrules]

This obvi works on the pages router too right?

[@tomisloading]

It does!

[@DouglasSouza-te9bt]

Theme pls

[@TrungNguyen-fi5ls]

I thought we couldn't manipulate DOM ??? 8:23

[@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

[@user-fr9we8vq7x]

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]

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

[@nandanchoudhary9798]

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.

[@nicolasmayorga8288]

I mean, it's good but not recommended cause in this way you're not getting pre-fetching and caching data in each link.

[@zlatkoiliev8927]

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]

Use the next link inside Transition link?

[@youhabbo01]

@@richardlepeuriancross5193 e.preventDefault ?

[@fathinfadhil]

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

[@uditnagar7905]

ezsnippet copied today's insta reel from here 🤣🤣🤣

[@ashishkumawat6110]

That's just vanilla JS stuff

[@null_spacex]

But it's the way to do it in Next App Router right now..

[@znkdev]

pretty dope! but way too much work.