A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

Like previous demos, this is an @astrodotbuild site using the Navigation API as a client-side router. On non-Chrome browsers it works as a regular MPA. Demo and source 👉🏽 Big thanks to @jaffathecake for the tip on how to do the smooth video transition.

Full credits for the UI go to designer Ehsan Rahimi 🙏 Their wonderful Dribbble shot was what inspired this demo

For folks following along, here's how to do it:

holy cow, this is so smooth! is this repo open source?

Yes! You can play with the demo here as well (need to use latest Chrome)

Would be really cool to see a demo video of how this API works. @wesbos or @stolinski maybe? Or a good segment for @syntaxfm at least. Who else does good demos that should see this?

Wow, I thought the View Transition API was allowing to manipulate a *static screenshot* of the old and new view. But it's actually not static? Game changer.

Nice demo!

Thanks, Una! 🙌🏽

Your view transition demos keep getting cooler 😮