See the final repository and tutorial in Codrops https://github.com/codrops/astro-shop-view-transitions
Astro Shop is a minimalist page with Astro View Transitions, an experimental feature built for smooth e seamless navigations + TailwindCSS
You need to set PUBLIC_URL environment variable that points to the url of the page, so we can provide Metadata image's URL
View Transitions is a experimental mechanism to transition between DOM states, learn more in these links:
- Astro Documentation: https://docs.astro.build/en/guides/view-transitions/
- MDN Documentation: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
Unfornatelly those browsers aren't compatible yet, see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility