This is a demo of using the View Tranisions API in MPA page navigation patterns. For example, create an app launcher like transition and prerender the next page while showing a bridge state. Note: As of Jun 8 2023, this MPA view transition requires chrome://flags#view-transition-on-navigation to be enabled.
Food for thought... for example:
In between the navigation,
- transition to a “bridge state” highlighting the shared element
- boot-up the next page behind the scenes (i.e. pre-* techniques)
- …then, conduct hard navigation, instantly & seamlessly
Check out the View Transition article for more details:
- https://developer.chrome.com/docs/web-platform/view-transitions/
- Specific to MPA transition: https://github.com/WICG/view-transitions/blob/main/cross-doc-explainer.md
This code base is built for demo purpose only (non production ready code). Please reference as one example of how View Transitions API can be used.
Thank you for your amazing & beautiful photos @ unsplash.com !
- @jezar
- @jaison333
- @boontohhgraphy
- @missle
- @tianshu
- @willxli
- @ultratunafish
- @danrang
- @kokit1202
- @superidol
- @hiro0718
- @sunillnaik
- @ary_heic
License Apache-2.0