In this video, Johnny explains how to use the view transitions API to give websites an app-like feel. He discusses how web developers have been striving to achieve the fast and sleek feel of mobile apps, and now there is a native way to emulate that with less code and performance cost. Johnny demonstrates using the view transitions API in a Spell Kit app, and shows how to apply custom animations. He also explains how to prevent animations from replaying when clicking on the same route again. Finally, Johnny recommends readers to read the article by Jake on view transitions API, and also shares a link to his video on text gradients.
**Key Facts:**
1. The tutorial introduces the "on navigate" lifecycle method in ZelKit for web developers.
2. The "on navigate" callback, executed before navigation, takes a single parameter—a callback.
3. ZelKit waits for the callback's promise to resolve before completing navigation.
4. The tutorial emphasizes the use of the start view transition, a crucial part of the ZelKit API.
5. View transitions involve two promises—one for taking a screenshot before navigation and the other after the next page is ready.
6. The default animated transition in ZelKit is a crossfade between the old and new pages.
7. The tutorial demonstrates custom animations for a more app-like feel, including a fade-out for the old page and a slide-from-right for the new page.
8. TypeScript users need to handle the experimental status of "start view transition" in different browsers.
9. The tutorial extends view transitions to headers and footers, allowing them to stay in place during page transitions.
10. An additional check is implemented to prevent view transitions when navigating to the same route again.
11. The tutorial concludes by encouraging readers to explore the ZelKit view transition systems API and references an article by Jake with examples.
12. The author recommends checking out related videos on text gradients for additional content.