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

Due to the rapidly advancing development of web APIs (highlighting the Fugu project), the gap between Progressive Web Apps (PWA), hybrid development approaches, and native apps has been progressively narrowing. Even visually, they are hardly distinguishable from native apps.
However, when it comes to animations, native apps have always had an edge due to the availability of native animation APIs. Complex animations, such as container transforms, were practically challenging to achieve in web apps without significant effort.
That's right. They WERE.
This gap can be closed thanks to the new View Transition API and Scroll-Driven Animations. And the best part is that it is almost entirely through CSS.
Intrigued? Sascha Lehmann from Thinktecture will provide an overview of these new APIs, how to effectively implement them in your project, and their limitations.

Transcript

1. View-Transition-API Gamechanger for hybrid app-development Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉  View-Transition-API Gamechanger for hybrid app-development
3. X-Platform Development? View-Transition-API Gamechanger for hybrid app-development
4. Native Web X-Platform … View-Transition-API Gamechanger for hybrid app-development
5. What is the problem? View-Transition-API Gamechanger for hybrid app-development
6. https://goo.gle/fugu-api-tracker View-Transition-API Gamechanger for hybrid app-development
7. Container-Transforms View-Transition-API Gamechanger for hybrid app-development
8. View-Transition-API 111+ TP X View-Transition-API Gamechanger for hybrid app-development
9. Trigger Process of a View-Transition View-Transition-API Gamechanger for hybrid app-development
10. What happens in the background? Process of a View-Transition User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…) View-Transition-API Gamechanger for hybrid app-development
11. Pseudo DOM Tree • New Top-Layer • Default animation: Cross-fade • Elements only exist during the View-Transition Process of a View-Transition View-Transition-API Gamechanger for hybrid app-development
12. Pseudoelements ::view-transition Overlay root element that sits above all other DOM elements in order to exclude genetic interference ::view-transition-group Root-Element of the View-Transition ::view-transition-image-pair Container of the before and after snapshot ::view-transition-old/-new Elements that show the before and after DOM states as a Snapshot or live view Process of a View-Transition Each pseudoelement can be styled via CSS View-Transition-API Gamechanger for hybrid app-development
13. The snapshots are ”just” images – Not real DOM Elements ATTENTION! Has no effect! View-Transition-API Gamechanger for hybrid app-development
14. Beispielanwendung animieren <Demo/>
15. Browser Stylesheet Where does the magic come from? View-Transition-API Gamechanger for hybrid app-development
16. What happens in the background „Cutting out“ additional parts User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…) View-Transition-API Gamechanger for hybrid app-development
17. What happens in the background „Cutting out“ additional parts User Perspective Browser Perspective Perform DOM changes Live-View (new) Crossfade Root - animiere Header separat startViewTransition(…) Screenshot-Header (old) View-Transition-API Gamechanger for hybrid app-development
18. DOM-Elements „Cutting out“ additional parts View-Transition-API Gamechanger for hybrid app-development
19. Beispielanwendung animieren <Demo/>
20. A look … … into the future View-Transition-API Gamechanger for hybrid app-development
21. Sascha Lehmann sascha.lehmann@thinktecture.com Thank you very much! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 
22. Demos / Repo Links • https://codepen.io/argyleink/pen/VwBKjwj • https://codepen.io/bramus/full/xxmozvN