mpa-view-transitions-sandbox.netlify.app
A collection of example view transitions for multi-page sites.
This is experimental, in progress technology. Things will break.
To see any of the examples working, you must have two Chrome flags enabled:
chrome://flags#view-transition
chrome://flags#view-transition-on-navigation
Posts and docs that have helped me as I'm learning how to use view transitions
- https://drafts.csswg.org/css-view-transitions
- https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
- https://daverupert.com/2023/05/getting-started-view-transitions/
- https://adactio.com/journal/20195
- https://developer.chrome.com/docs/web-platform/view-transitions/#default-style-and-transition-reference - API reference guide
- https://smashing-transitions.netlify.app - entire presentation about VT with VT
- https://github.com/argyleink/morphull - Astro starter used to build the Smashing Transitions deck
- https://000694591.codepen.website/ - basic text/title morphing
- https://nerdy.dev - blog with VT progressive enhancement (blog posts have the most morphing)
- https://000694490.codepen.website/ - emoji VT stress test with
linear()springy easing