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.

Angular Developer

Picnic Technologies B.V.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

The future of recruiting beyond talent acquisition
03:15 MIN

The future of recruiting beyond talent acquisition

What 2025 Taught Us: A Year-End Special with Hung Lee

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Why corporate AI adoption lags behind the hype
03:28 MIN

Why corporate AI adoption lags behind the hype

What 2025 Taught Us: A Year-End Special with Hung Lee

Breaking down silos between HR, tech, and business
03:39 MIN

Breaking down silos between HR, tech, and business

What 2025 Taught Us: A Year-End Special with Hung Lee

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

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

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

PWAs in 202141:49

PWAs in 2021

Ire Aderinokun

Web APIs you might not know about43:53

Web APIs you might not know about

Sasha Shynkevich

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.