Sascha Lehmann

View-Transition-API: Gamechanger for hybrid app-development

Finally, web apps can have animations as fluid as native apps. The View Transition API bridges the gap with simple CSS, making complex transitions remarkably easy to implement.

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.

Matching moments

Creating fluid animations with the View Transitions API
37:51 MIN

Creating fluid animations with the View Transitions API

What's new in CSS for Designers?

Q&A on refactoring SPAs and page transitions
28:37 MIN

Q&A on refactoring SPAs and page transitions

The Lean Web

Exploring new browser APIs in Interop 2025
06:07 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

Relying on native browser features and the platform
22:39 MIN

Relying on native browser features and the platform

The Lean Web

Expanding PWA capabilities with modern web APIs
05:54 MIN

Expanding PWA capabilities with modern web APIs

PWAs in 2021

Understanding the web's evolution into an app platform
03:47 MIN

Understanding the web's evolution into an app platform

Native Web Apps: Are We There Yet?

The future of PWAs and Fugu API adoption
31:27 MIN

The future of PWAs and Fugu API adoption

Project Fugu: Progressive Web Apps, Superpowered

Why learning about new APIs benefits developers
03:41 MIN

Why learning about new APIs benefits developers

Explore new web features before everyone else

Featured Partners

Related Videos

See all videos
What’s New and What’s Next in Web UI22:46

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Project Fugu: Extending the web58:12

Project Fugu: Extending the web

Lucien Immink

Project Fugu: Progressive Web Apps, Superpowered45:20

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Possibilities with Web Capabilities27:05

Possibilities with Web Capabilities

Rowdy Rabouw

Native Web Apps: Are We There Yet?44:40

Native Web Apps: Are We There Yet?

Maxim Salnikov

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

PWAs in 202141:49

PWAs in 2021

Ire Aderinokun

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
Inside last week’s Dev Digest 190 . 🙅 Developers don’t trust AI, and that’s a good thing 🤖 Why everyone is talking about AI agents 🔓 Autonomous AI hacking and the future of cyber security 😨 Windows 10 support ends, millions of PC’s fall off a securi...
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos

From learning to earning

Jobs that call for the skills explored in this talk.