Intro
Using the (CSS) View Transition API, you can create smooth transitions between different states of your web application. This can be done on the same page or between different pages (as long as they share the same origin).
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!
More demo's
- https://live-transitions.pages.dev/
- https://github.com/google/io-connect-2024-ui-workshop
- https://view-transitions.chrome.dev/profiles/mpa/
- https://css-tricks.com/toe-dipping-into-view-transitions/
- https://view-transitions.chrome.dev/cards/spa/
- https://http203-playlist.netlify.app/
- https://tympanus.net/Tutorials/Velvette/?list
- https://moritzglantz.de/multi-page-view-transitions-demo/
- https://css-tricks.com/toe-dipping-into-view-transitions/
- https://www.patterns.dev/vanilla/view-transitions/
- https://codepen.io/argyleink/pen/KKBWwMr
- https://nerdy.dev/