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.

#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.