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

Published: 04 July 2024
on channel: Tom Is Loading

54,606

2.3k

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://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: https://github.com/TomIsLoading/next-...

🔗 My Links
TikTok:   / tomisloading
Instagram:   / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter:   / tomisloading
Discord & more: https://linktr.ee/tomisloading

Portfolio templates: https://tomisloading.gumroad.com/
Website: https://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

Watch video How To Add Page Transitions To NextJS 14 (including Exit Animations) online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 04 July 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 54,606 once and liked it 2.3 thousand people.

1,011