Seamless Page Navigation With the View Transitions API (with Maxi Ferreira)

The View Transitions API is now stable in Chrome. That means we can make extremely cool nav animations in our web projects without extra JS overhead. Maxi Ferreira returns to teach us how it works! Repo https://github.com/Charca/astro-blog-view-transitions/pull/1 Upcoming episodes: https://lwj.dev/schedule Links & Resources: - https://twitter.com/charca - https://codepen.io/jlengstorf/pen/abQLOWv - https://github.com/Charca/astro-blog-view-transitions - https://aerotwist.com/blog/flip-your-animations/ - https://developer.chrome.com/docs/web-platform/view-transitions/ - https://twitter.com/argyleink - https://twitter.com/bramus Watch future episodes live at https://twitch.tv/jlengstorf This episode was sponsored by: - Netlify (https://lwj.dev/netlify) - Nx (https://lwj.dev/nx) - New Relic (https://lwj.dev/new-relic) - Pluralsight (https://lwj.dev/pluralsight) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) Chapters: 00:00:00 - Welcome 00:02:41 - Follow up from Maxi Ferreira’s last visit 00:08:56 - What’s magical about the View Transitions API? 00:14:46 - How should we start working with View Transistions API? 00:19:18 - Applying a View Transition name 00:21:26 - How is key framing handled? 00:39:52 - Backwards compatibility 00:41:40 - Moving cards instead of fading them 00:44:53 - Working on seamless transitions with View Transitions API 00:54:34 - Adding a meta tag in the head element 00:56:29 - How much work would this be in JavaScript? 01:01:22 - Can you change the stack order? 01:17:02 - When does this arrive in stable?