View Transition API and scroll-driven animations: game changers for hybrid app development

The rapid development of web APIs (keyword: Project Fugu) has increasingly closed the gap that existed between progressive web apps (PWA) or hybrid development approaches and native apps. Visually, they are also barely distinguishable from native apps. However, when it comes to animations, native apps have always been one step ahead thanks to the availability of native animation APIs. Until now, complex animations such as container transforms were practically impossible to implement in web apps without immense effort.

That’s right. They WERE. This gap can now also be closed thanks to the new View Transition API and Scroll-Driven Animations. And the best thing about it: everything is done almost exclusively using CSS. Curious? Then Sascha Lehmann from Thinktecture will give you an overview of the new APIs, how you can use them effectively in your project and where their limits lie.

Transcript

1. View-Transition-API and Scroll-Driven Animations 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 and Scroll-Driven Animations Gamechanger for hybrid app-development
3. X-Platform development? View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
4. Native Web X-Platform … View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
5. What is the problem? View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
6. https://goo.gle/fugu-api-tracker View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
7. Container-Transforms View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
8. View-Transition-API 111+ 18 X View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
9. Trigger Process of a View-Transition View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
10. 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
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 and Scroll-Driven Animations Gamechanger for hybrid app-development
12. 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
13. 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
14. Beispielanwendung animieren <Demo/>
15. Browser Stylesheet Where does the magic come from? View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
16. 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
17. 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
18. DOM-Elemente Zusätzliche Teile “ausschneiden” View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
19. Beispielanwendung animieren <Demo/>
20. Scroll-Driven-Animations 115+ X X View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
21. 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
22. 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
23. 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
24. 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
25. Beispielanwendung animieren <Demo/>
26. A look … … into the future View-Transition-API and Scroll-Driven Animations Gamechanger for hybrid app-development
27. Sascha Lehmann sascha.lehmann@thinktecture.com Thank you! @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