Jake Archibald

🔊 It's new OTMT time! Me and @surma chat through some newer View Transitions features that have recently landed in browsers, and some things that might land this year.

⬇️ Pop this in your ears ⬇️
https://offthemainthread.tech/episode/new-view-transition-stuff/

New View Transition Stuff - Off The Main Thread

Jan 15, 2025 at 11:39amWeb
Show threadItachi UchihaJan 15, 2025
@jaffathecake @surma Are you available to chat with me
Show threadSlab BulkheadJan 15, 2025
@jaffathecake @surma really looking forward to trying view transitions on a project soon
Show threadBramusJan 15, 2025

@jaffathecake @surma Good news: advanced attr() is shipping in Chrome 133 which goes stable two weeks from now.

It allows you to do things like the code attached to this tweet.

Live demo: https://codepen.io/bramus/pen/wBwpgaj

Auto view-transition-name with attr() and type(<custom-ident>)

...

Show threadBramusJan 15, 2025

@jaffathecake @surma Also, to those who couldn’t follow along with the hasUAVisualTransition flag: I have a section on that in the same-document docs:

https://developer.chrome.com/docs/web-platform/view-transitions/same-document#integration_with_the_navigation_api_and_other_frameworks

Using the flag, the demo on the right does not run the View Transition because the UA already provided a swipe transition.

Same-document view transitions for single-page applications  |  View Transitions  |  Chrome for Developers

Get started with same-document view transitions for use in your single-page application.

Chrome for Developers
Show threadBramusJan 15, 2025

@jaffathecake @surma Note: the `hasUAVisualTransition` check is not possible with cross-document navigations as the info is not exposed anywhere.

I filed https://github.com/whatwg/html/issues/10831 to tackle that.

Detect UA transitions on same-origin cross-document navigations · Issue #10831 · whatwg/html

What problem are you trying to solve? In short: Same as #8782 but then for same-origin cross-document navigations. A bit longer: Both Safari iOS and Safari Desktop (and soon Chrome on Android) have...

GitHub