Sascha Lehmann
View-Transition-API: Gamechanger for hybrid app-development
#1about 2 minutes
Understanding hybrid, native, and web development models
The landscape of native, web, and hybrid development is defined to set the context for the View Transition API's impact.
#2about 3 minutes
The animation gap between web and native apps
Native apps have superior animation capabilities like container transforms, which are difficult to replicate on the web due to the rigid DOM structure.
#3about 3 minutes
Introducing the core mechanics of the View Transition API
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.
#4about 2 minutes
Comparing a user experience with and without view transitions
A side-by-side demonstration shows how view transitions transform a functional but plain app into a visually appealing and fluid user experience.
#5about 4 minutes
Understanding the DOM structure and pseudo-elements
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.
#6about 2 minutes
Implementing default cross-fades and custom animations
Enabling the default cross-fade transition is simple with a framework feature flag, and these default animations can be overridden with custom CSS.
#7about 5 minutes
Animating individual elements using the view-transition-name property
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.
#8about 4 minutes
Exploring future features and creative use cases
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.
Related jobs
Jobs that call for the skills explored in this talk.
Technoly GmbH
Berlin, Germany
Senior
JavaScript
Angular
+1
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Matching moments
03:54 MIN
Q&A on refactoring SPAs and page transitions
The Lean Web
03:38 MIN
Creating fluid animations with the View Transitions API
What's new in CSS for Designers?
06:46 MIN
Exploring new browser APIs in Interop 2025
New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw
02:15 MIN
Navigating the transition from native WPF to the web
WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More
03:18 MIN
Relying on native browser features and the platform
The Lean Web
09:07 MIN
Expanding PWA capabilities with modern web APIs
PWAs in 2021
12:30 MIN
Understanding the web's evolution into an app platform
Native Web Apps: Are We There Yet?
10:00 MIN
Building resilient and performant CSS-only components
NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg
Featured Partners
Related Videos
22:46What’s New and What’s Next in Web UI
Cleyra Uzcategui
40:24Snappy UI needs no Single-Page Application
Clemens Helm
58:12Project Fugu: Extending the web
Lucien Immink
45:20Project Fugu: Progressive Web Apps, Superpowered
Christian Liebel
27:05Possibilities with Web Capabilities
Rowdy Rabouw
44:40Native Web Apps: Are We There Yet?
Maxim Salnikov
44:43Explore new web features before everyone else
Nikita Dubko
41:49PWAs in 2021
Ire Aderinokun
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
Content Pass GmbH
Berlin, Germany
Senior
API
Node.js
JavaScript
TypeScript
Continuous Integration
Accso - Accelerated Solutions GmbH
Köln, Germany
Remote
Senior
Java
Scrum
React
Python
+4
NeuralAI
Remote
€40-80K
API
C++
WebGL
+7