View Transition API und Scroll-Driven Animations: Gamechanger für die hybride App-Entwicklung

Durch die rasend schnelle Weiterentwicklung von Web-APIs (Stichwort Projekt Fugu) konnte die Lücke, die zwischen Progressive Web Apps (PWA) oder hybriden Entwicklungsansätzen und den nativen Apps bestand, mehr und mehr geschlossen werden. Jedoch wenn es um das Thema Animationen geht, waren native Apps durch die Verfügbarkeit nativer Animations-APIs immer einen Schritt voraus. Komplexe Animationen wie Container Transforms waren bisher ohne immensen Aufwand in Web-Apps praktisch nicht zu realisieren. Auch diese Lücke kann nun dank der neuen View Transition API und der Scroll-Driven Animations geschlossen werden. Und das beste daran: Alles fast ausschließlich per CSS.

Transcript

1. View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung 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 und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
3. X-Platform Entwicklung? View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
4. View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung Native Web X-Platform …
5. Wo ist das Problem? View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
6. View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung https://goo.gle/fugu-api-tracker
7. Container-Transforms View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
8. View-Transition-API View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung 111+ TP X
9. Trigger Ablauf einer View-Transition View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
10. Was im Hintergrund passiert Ablauf einer View-Transition View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…)
11. Pseudo DOM Tree • Neuer Top-Layer • Standardanimation: Cross-fade • Elemente existieren nur so lange bis die View-Transition abgeschlossen ist Ablauf einer View-Transition View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
12. Pseudo Elemente ::view-transition Overlay-Root-Element, das über allen anderen DOM-Elementen sitzt, um genenseitige Beeinträchtigungen auszuschließen ::view-transition-group Root-Element der View-Transition ::view-transition-image-pair Container des Vorher- und Nachher- Screenshots ::view-transition-old/-new Elemente die den vorherigen (old) oder folgenden (new) DOM Zusatand in Form eines Screenshots darstellen Ablauf einer View-Transition Jedes Pseudo-Element ist separat per CSS stylebar View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
13. Die Scrennshots sind ”nur” Bilder – Keine DOM Elemente Aber ACHTUNG! Hat keinen Effekt! View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
14. Beispielanwendung animieren <Demo/>
15. Browser Stylesheet Woher kommt die Magie? View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
16. Was im Hintergrund passiert Zusätzliche Teile “ausschneiden” View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…)
17. Was im Hintergrund passiert Zusätzliche Teile “ausschneiden” View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung User Perspective Browser Perspective Perform DOM changes Live-View (new) Crossfade Root - animiere Header separat startViewTransition(…) Screenshot-Header (old)
18. DOM-Elemente Zusätzliche Teile “ausschneiden” View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
19. Beispielanwendung animieren <Demo/>
20. Scroll-Driven-Animations View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung 115+ X X
21. Default – Document Timeline Animation-Timelines View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung • Die default Document-Timeline • Zeit schreitet, ab dem Zeitpunkt ab dem das Dokument initial geladen wurde, kontinuierlich voran
22. Scroll Progress Timeline • Scroller: Element, dessen Scroll-Progress herangezogen wird • nearest (default) • root • self • Axis: Scroll-Achse die verwendet werden soll • block (default) • inline • X • Y Animation-Timelines View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung • Die Zeit schreitet durch das Scolling eines scollable Elements (scroller) voran • Die Scrollposition wird in Prozentwerte von 0 – 100 % umgewandelt
23. View Progress Timeline • Axis: Scroll-Achse die verwendet werden soll • block (default) • inline • X • Y • Inset: Zur festlegung von insets bzw. outsets, die bestimmen wann sich das Element im Viewport befindet • start (top-offset) • end (bottom-offset) Animation-Timelines View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung • Die Zeit schreitet durch die Sichtbarkeit eines Elements (subject) voran • Die Sichtbarkeit des Elements im Viewport wird in Prozentwerte von 0 – 100 % umgewandelt • Wird immer in Abhänigkeit zum nächstbesten scrollbaren Element getracked
24. View Progress Timeline • Alternative Schreibweise zu view( start end) • Zusätzliche Key-Words für animation-range • entry: Entspricht 0% • exit: Entspricht 100% • Zusätzliche Key-Words für animation- range-start und animation-range-end • cover: Sobald nur ein Teil des Elements im Viewport sichtbar ist • contain: Das gesamte Element muss im Viewport sichtbar sein • Eignen sich bspw. sehr gut für Fälle mit Bildern unterschiedlicher höhen Animation-Timelines View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
25. Beispielanwendung animieren <Demo/>
26. Ein Blick … … in die Zukunft View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung
27. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 
28. Demos / Repo Links • https://scroll-driven-animations.style/ • https://codepen.io/argyleink/pen/VwBKjwj • https://codepen.io/bramus/full/xxmozvN • https://github.com/thinktecture-labs/view-transition-api-scroll-driven- animations-webinar