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

Опубликовано: 04 Июль 2024
на канале: 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

Смотрите видео How To Add Page Transitions To NextJS 14 (including Exit Animations) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tom Is Loading 04 Июль 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 54,606 раз и оно понравилось 2.3 тысяч людям.

1,134