Intro
Requirements: a browser that supports the View Transition API
This is a very basic demo of using (CSS) View Transition API in full page transition.
When navigation from the Home to the Speed -page, a page's title and hero image will animate between them.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus deleniti illo molestias soluta iusto voluptatem aspernatur dolor nostrum. Unde, culpa!
Browser support
As of this writing only Chromium web browser (Chrome, Edge, Opera and Chrome for Android), with a experimental flag enabled, are supporting this new feature.
Enabling View Transition API in Chrome (Chromium)
- Open Chrome
- In the address bar type:
chrome://flags/ - In the search bar type:
viewTransition, two items will be shown: viewTransition API and viewTransition API for navigations - "Enable" both and click the "Relaunch" -button
Check caniuse.com/view-transitions for current web browser support.
More demo's
- https://live-transitions.pages.dev/
- https://astro-movies.pages.dev/
- https://fynn.be/blog/
- https://nerdy.dev/