Slide 1
Slide 1 text
View-Transition-API
Gamechanger for hybrid
app-development
Sascha Lehmann
@derLehmann_S
Consultant
Slide 2
Slide 2 text
Consultant @ Thinktecture AG
Sascha Lehmann
@derLehmann_S
[email protected]
https://www.thinktecture.com/thinktects/sascha-lehmann/
✉
View-Transition-API
Gamechanger for hybrid app-development
Slide 3
Slide 3 text
X-Platform Development?
View-Transition-API
Gamechanger for hybrid app-development
Slide 4
Slide 4 text
Native Web
X-Platform
…
View-Transition-API
Gamechanger for hybrid app-development
Slide 5
Slide 5 text
What is the problem?
View-Transition-API
Gamechanger for hybrid app-development
Slide 6
Slide 6 text
https://goo.gle/fugu-api-tracker
View-Transition-API
Gamechanger for hybrid app-development
Slide 7
Slide 7 text
Container-Transforms
View-Transition-API
Gamechanger for hybrid app-development
Slide 8
Slide 8 text
View-Transition-API
111+ TP X
View-Transition-API
Gamechanger for hybrid app-development
Slide 9
Slide 9 text
Trigger
Process of a View-Transition
View-Transition-API
Gamechanger for hybrid app-development
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
The snapshots are ”just” images – Not real DOM Elements
ATTENTION!
Has no effect!
View-Transition-API
Gamechanger for hybrid app-development
Slide 14
Slide 14 text
Beispielanwendung animieren
Slide 15
Slide 15 text
Browser Stylesheet
Where does the magic come from?
View-Transition-API
Gamechanger for hybrid app-development
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
DOM-Elements
„Cutting out“ additional parts
View-Transition-API
Gamechanger for hybrid app-development
Slide 19
Slide 19 text
Beispielanwendung animieren
Slide 20
Slide 20 text
A look …
… into the future
View-Transition-API
Gamechanger for hybrid app-development
Slide 21
Slide 21 text
Sascha Lehmann
[email protected]
Thank you very much!
@derLehmann_S
[email protected]
https://www.thinktecture.com/thinktects/sascha-lehmann/
✉
Slide 22
Slide 22 text
Demos / Repo Links
• https://codepen.io/argyleink/pen/VwBKjwj
• https://codepen.io/bramus/full/xxmozvN