Seamless Page Transitions with Astro and Web Platform APIs (with Maxi Ferreira) | Some Antics

The new experimental Shared Element Transition API in Google Chrome enables single-page applications to transition from page to page smoothly and seamlessly as the user navigates, much like a native application might. Our guest Maxi Ferreira has put together a lovely proof of concept of page transitions working in a multi-page application. Join us as he shows us how it can be done with web platform APIs and a little help from Astro!

Broadcasted live on Twitch on September 13, 2022. Watch future streams live at   / someanticsdev  .

Transcript and links at: https://someantics.dev/astro-page-tra...
Source code: https://github.com/SomeAnticsDev/astr...
Demo: https://some-antics-astro-page-transi...
Follow Maxi on Twitter:   / charca  
Maxi's blog: https://www.maxiferreira.com/

#AstroDotBuild #WebDevelopment #JavaScript

---

Mentioned Links
• Some Antics: Modern Websites with CSS Cascade Layers and Astro (with Mayank): https://someantics.dev/cascade-layers...
• Chrome Developers blog on the Shared Element Transition API: https://developer.chrome.com/blog/sha...
• Ping: https://ping.gg
• Some Antics: Lift Off with the Astro v1 Beta (with Ben Holmes): https://someantics.dev/astro-v1-beta/
• Chrome Developers blog on the Navigation API: https://developer.chrome.com/docs/web...
• Maxi's "Experiments with Astro and the Shared Element Transition API" blogpost: https://www.maxiferreira.com/blog/ast...

---

00:00:00 Howdy!
00:01:29 What Is the Shared Element Transition API?
00:06:54 Enabling Experimental Flags
00:10:55 Checking Out the Astro Music MPA!
00:15:23 Adding the Product Details Route
00:20:07 Faking an SPA with the Navigation API
00:35:52 Making a Transition
00:38:12 Animating the Page Transition with CSS
00:45:07 Transitioning Shared Elements
00:53:29 Transitioning Back to the Homepage
01:00:23 Accounting for Latency
01:10:11 More Fancy Transition Animations
01:20:21 Wrapping Up