Keep your page interactive during view transitions #GoogleIO

Key Takeaways

A new sub feature of view transitions, and one that I personally find very exciting, is the addition of element scoped view transitions. And instead of starting a view transition that covers the entire document, [music] you can now start a view transition on a subtree of the DOM while keeping the rest of the page interactive. Yes, you are hearing this right. After 4 years of talking about it, we got all the necessary foundations in place, got all the details sorted, and we have shipped this in Chrome 117. And this demo right here extensively relies on element scoped view transitions. When adding one of the cards to the selection list, a scoped transition is started on only the sidebar, >> [music] >> meaning that I can still hover and interact with the other cards while the animation is running. Or when filtering the list of items, a scoped view transition is started only on the grid, while other elements such as a navigation bar and the drop-downs also remain interactive. To start an element scoped view transition, it's really easy. Instead of calling document.startViewTransition, you now call startViewTransition on a specific element. >> This allows for multiple view transitions to run at the same time, as well as the nesting of view transitions. >> [music] >> Scope view transitions are perfect for micro interactions and in-page stateful morphing, giving the user more context when there is a visual change. This is a great way to enhance the usability of your application, while also elevating how it looks and feels. [music]