View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development Sascha Lehmann @derLehmann_S Consultant

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/ View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

X-Platform development? View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Native Web X-Platform … View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

What is the problem? View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

https://goo.gle/fugu-api-tracker View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Container-Transforms View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

View-Transition-API 111+ 18 X View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Trigger Process of a View-Transition View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

What happens behind the scenes User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…) View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development Process of a View-Transition

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 and Scroll-Driven Animations Gamechanger for hybrid app-development

Pseudo Elemente ::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 Jedes Pseudo-Element ist separat per CSS stylebar Process of a View-Transition View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

The snapshots are ”just” images – Not real DOM Elements ATTENTION! Has no effect! View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Beispielanwendung animieren

Browser Stylesheet Where does the magic come from? View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

What happens behind the scenes „Cutting out“ additional parts User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…) View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

What happens behind the scenes „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 and Scroll-Driven Animations Gamechanger for hybrid app-development

DOM-Elemente Zusätzliche Teile “ausschneiden” View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Beispielanwendung animieren

Scroll-Driven-Animations 115+ X X View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Default – Document Timeline Animation-Timelines • Represents the default Document-Timeline • Time progresses continuously from the time the document was initially loaded View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Scroll Progress Timeline • Scroller: Element, to determine the scroll progress • nearest (default) • root • self • Axis: Scroll-axis that is used • block (default) • inline • X • Y Animation-Timelines • Time advances by scolling a scollable element (scroller) • The scroll position is converted into percentage values from 0 - 100 View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

View Progress Timeline • Axis: Scroll-axis that is used • block (default) • inline • X • Y • Inset: To define insets or outsets that determine when the element is in the viewport • start (top-offset) • end (bottom-offset) Animation-Timelines • Time progresses through the visibility of an element (subject) • The visibility of the element in the viewport is converted into percentage values from 0 - 100 • Is always tracked depending on the next best scrollable element View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

View Progress Timeline • Alternative spelling for view( start end) • Additional key words for animation-range • entry: Equals 0% • exit: Equals 100% • Additional key words for animation-range-start and animation-range-end • cover: As soon as only part of the element is visible in the viewport • contain: The entire element must be visible in the viewport • Very suitable, for example, for cases with images of different heights Animation-Timelines View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Beispielanwendung animieren

A look … … into the future View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development

Sascha Lehmann [email protected] Thank you! @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