Ever wondered how to animate between two UI states without wrangling heaps of extra code? Well, get ready to unlock a new level of web development capabilities with us, as we dive into the exciting world of view transitions.
Highlights
00:00 Introduction
00:44 Understanding View Transitions
02:05 Demos & Practical Applications
03:14 Current Reality vs. The Dream
06:47 Potential Use Cases & WordPress Context
07:25 View Transitions With HTMX
08:31 Working With View Transitions in CSS
12:54 Conclusion
Links
- Chrome Developers Article: https://developer.chrome.com/docs/web-platform/view-transitions/
- Astro 3.0 View Transitions: https://astro.build/blog/astro-3/#astro-view-transitions
- Svelte View Transitions: https://svelte.dev/blog/view-transitions
- HTMX View Transitions: https://htmx.org/docs/#view-transitions
- View Transitions API Overview: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
- Maxi Ferrera's Demo: https://live-transitions.pages.dev/
- Turbo: https://turbo.hotwired.dev/
- swup: https://swup.js.org/
- Shuffle.js: https://vestride.github.io/Shuffle/
More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)
09/21/23 • 13 min
Siegfried, deploy! - Reality Check: The Limits of View Transitions
Transcript
We are recording in a new setup and we've got a new topic . We're talking about view transitions .
DominikOh the hottest out there , yeah , yeah .
DominikSo with the release of Astro 3.0 and like also swelled adopting it and some other libraries that can support it out of the box now , like HTMX , for exam
Generate a badge
Get a badge for your website that links back to this episode
<a href="https://goodpods.com/podcasts/siegfried-deploy-366711/reality-check-the-limits-of-view-transitions-52674176"> <img src="https://storage.googleapis.com/goodpods-images-bucket/badges/generic-badge-1.svg" alt="listen to reality check: the limits of view transitions on goodpods" style="width: 225px" /> </a>
Copy