In this video we'll exploring the new View Transitions API that makes it super easy to add page transitions to your website, without the need of any library.

👀 Timestamps
00:00 - Intro
00:47 - What we'll be building
01:46 - Project Setup
03:28 - Start building
03:40 - New navigate event
05:43 - Intercept navigate event
05:57 - Replace page content and add basic animation
09:24 - Customise default animation
10:26 - Animate main nav active style
12:58 - Animate card title and image
15:03 - Don't intercept all navigations
16:26 - Animating title and image without manually setting view transition names
24:40 - End result
25:40 - NextJS, why it doesn't work (yet!)
26:55 - Outro


💬 Join us on Discord: [ Ссылка ]
🐦 Follow me on Twitter: [ Ссылка ] & [ Ссылка ]
👨‍🏫 Check my mentorships: [ Ссылка ]

🔗 Source on Github: [ Ссылка ]

Tools mentioned:
🔗 View Transitions API (MDN docs): [ Ссылка ]
🔗 A bit older but stil great video by Jake Archibald: [ Ссылка ]
🔗 Tailwind: [ Ссылка ]

#css #viewtransitionsapi #cssanimations #browsers #web #frontend

свернуть