The landscape of native, web, and hybrid development is defined to set the context for the View Transition API's impact.
Native apps have superior animation capabilities like container transforms, which are difficult to replicate on the web due to the rigid DOM structure.
The API simplifies animations by taking before-and-after screenshots of the DOM, performing changes in the background, and then cross-fading between the two states.
A side-by-side demonstration shows how view transitions transform a functional but plain app into a visually appealing and fluid user experience.
The browser creates a temporary top-level DOM layer with special pseudo-elements for the old snapshot and new live view states, which can be targeted with CSS.
Enabling the default cross-fade transition is simple with a framework feature flag, and these default animations can be overridden with custom CSS.
Assigning a unique view-transition-name to an element in both the start and end states allows the browser to automatically animate its size and position.
The API is evolving with proposed features like scope transitions and multi-page transitions, and can be used creatively for list sorting, sliders, and accordions.
Sensory-Minds GmbH
Offenbach am Main, Germany
22:46Cleyra Uzcategui
40:24Clemens Helm
58:12Lucien Immink
45:20Christian Liebel
44:40Maxim Salnikov
27:05Rowdy Rabouw
44:43Nikita Dubko
41:49Ire Aderinokun
Jobs that call for the skills explored in this talk.
Jobriver Hr Service
Berlin, Germany
Accso - Accelerated Solutions GmbH
Frankfurt am Main, Germany
Arian Hapus
Oswestry Rural, United Kingdom
