View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung Sascha Lehmann @derLehmann_S Consultant

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉  View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung

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

View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung Native Web X-Platform …

Wo ist das Problem? View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung

View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung https://goo.gle/fugu-api-tracker

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

View-Transition-API View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung 111+ TP X

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

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(…)

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

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

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

Beispielanwendung animieren

Browser Stylesheet Woher kommt die Magie? View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung

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(…)

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)

DOM-Elemente Zusätzliche Teile “ausschneiden” View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung

Beispielanwendung animieren

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

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

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

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

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

Beispielanwendung animieren

Ein Blick … … in die Zukunft View-Transition-API und Scroll-Driven Animations Gamechanger für die hybride App-Entwicklung

Sascha Lehmann [email protected] Dankeschön! @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 

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