View Transitions API: Creating Smooth Transitions

View Transitions API: Creating Smooth Transitions

GDG İzmir - Devfest İzmir 25'
13.12.2025

Tepekule Kongre, Sergi ve İş Merkezi - Bayraklı, İzmir

Transcript

1. View Transitions API Creating Smooth Transitions #devfestizmir #devfest25izmir
2. Mert Metin Senior Software Engineer Blogger, speaker QR to reach me Interests Microsoft / .NET web and API applications software architecture, secure software, clean code infrastructure, system design
3. Agenda What is View Transitions? Why? Same Document View Transitions Cross Document View Transitions Additional Informations
4. Getting Started https://github.com/mertmtn/view-transitions-api-demo/tree/master/none
5. View Transitions API provides a mechanisim to create smooter transitions between DOM states or pages on the website.
6. Improved perceived performance
7. Better user experience
8. Clean Code - No more complex CSS, Javascript code or 3rd party libraries
9. Same-document view transitions a.k.a. SPA - Single Page Applications runs on a single document
10. https://github.com/mertmtn/view-transitions-api-demo/tree/master/spa
11. Identify transitions with unique name. “view-transition-name” css property
14. How to trigger? Invoke document.startViewTransition core method
15. Customize transitions with CSS animations
16. How to work?
18. current state Current state - Browser takes the snaphot of the current state.
19. new state snapshotted DOM manipulations is updated by the callback function
20. new state-snapshotted Updated new state Browser also takes snapshpot of the new state.
21. pseudo-element-tree
22. swapping two states Swapping between old and new state using animations.
23. view-transition-old(root) view-transition-new(root) opacity:0 opacity:1 fades-out fades-in
24. https://codepen.io/bramus/full/xxQKvJP
25. a.k.a. MPA - Multiple Page Applications Cross-document view transitions runs between two different documents
26. https://github.com/mertmtn/view-transitions-api-demo/tree/master/mpa
27. Opt-in. Need to activate
28. Activating with CSS code
29. Works only same-origin pages. https://xyz.com:443 scheme hostname port origin
30. same origin https://xyz.com/test https://xyz.com/about cross origin http://xyz.com/page.html https://xyz.com:81/about https://admin.xyz.com https://xyz.com/page.html Kaynak:
31. Not works with situations; Opening from bookmarks Navigating using the URL address bar Any form of user or script initiated reload.
32. pageswap Triggered when a page is about to be replaced with a new one. User clicks another page. Browser redirects new page but old page still occurs.
33. pagereveal Handles while new page showing. Render new page. Browser navigates it.
34. pageswap -pagereveal birlikte kullanımı User clicks B page redirect from page A. page A handles pageswap → Takes a snapshot. Browser navigates page B. page B handles pagereveal → Plays transitions.
35. Additional Informations
36. Documentation https://developer.chrome.com/docs/web-platform/view-transitions
37. Browser support Same-document view transitions Cross-document view transitions https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition#browser_compatibility
38. Debug ve Test Chrome DevTools “Animations” Paneli
39. DevTools - MoreTools - Animations
40. DevTools - MoreTools - Animations
42. Manage duplicated elements
43. view-transition-class as a solution
45. https://view-transitions.chrome.dev/cards/spa/
46. Promise
47. Work with different Javascript frameworks
52. Thank you Contact Demo