Josh Appel
Jake Archibaldš SPA view transitions have landed in stable Chrome!
But, this is just the start! We've got more view transition features planned. Here's what we're looking at next:
https://developer.chrome.com/blog/spa-view-transitions-land/
Thank you to everyone who gave feedback along the way - you helped shape this API! It's a feature I've wanted for years, and it's great to see it land.
Scott Jenson@jaffathecake SO so so looking forward for slide apps to support this. Magic Move anyone?
Jed Schmidt@jaffathecake itās such a creative take on a common need, thanks for your work on this!
Gabor Lenard@jaffathecake The most intriguing new feature since the service workers š
Dan Kantor (OLD ACCOUNT)@jaffathecake congrats! Huge milestone for the web.
Nina "Erina" Satragno š«
Ben Seven@jaffathecake hi Jake - this seems really cool. Forgive me if this is a thick question but when you mention SPAs specifically, when might this land for non-SPA uses? Cheers
@ben_seven some details are in the linked post, but we don't have a date yet
@jaffathecake thanks - I wondered if that was what āTransitions across documentsā meant - is that the bit?
@ben_seven haha yes, long before we had the terms SPA and later MPA, we simply clicked links and navigated across documents.
@jaffathecake sorry - I donāt build SPAs so itās hard to untangle what normal terms are once I think Iām reading through something beyond me, if that makes sense. What youāre describing is everything we build - if the trends continue we might miss learning how to build them entirely š„³ but view / element transitions I think are going to be a huge deal.
AsbjĆørn Ulsberg@ben_seven @jaffathecake How I look forward to a future where SPA is in buried in the same pile of old, unused technology as Flash, CORBA, WCF and Internet Explorer 6.
Ollie Boermans@jaffathecake congrats Jake! This is awesome
Martin Grubinger@jaffathecake š¤© congrats, this is huge! I can't believe how fast this landed in stable! thank you!
godrin@jaffathecake Thank you so much for this great feature! I'm put so much hope on transitions across documents for MPAs.
Ada Rose Cannon@jaffathecake exciting!!
Matt Campbell@jaffathecake What impact, if any, does this work have on accessibility? Is there yet a standard way to tell screen readers that the equivalent of a new page load has happened, so the screen reader can provide its desired UX for SPA navigations, rather than the application having to provide its own off-screen ARIA live region announcement or focus something that shouldn't be focusable?
@matt the navigation API provides a lot of that. View transitions are purely visual, so they keep out of the way of screen readers
Kornel@jaffathecake Does it actually require an SPA now? I thought the idea was to support transitions for non-JS page reloads.
@kornel could I persuade you to read the article? š
@jaffathecake Sorry, no way. I've skimmed it.
edit: okay, fine.
Christopher Kirk-Nielsen@jaffathecake I am super excited by the View Transition API, and have started playing with it. Thank you for your hard work on this! I had two notes:
1. Classes to group transitions are an excellent idea, sign me up!
2. Is there a way to control the z-index of each group? In a grid, if one element is removed and a new one is added, I'd like to ensure the new one is above the old one. (note that I tried using z-index based on a group having an only child, no sure it's supposed to work)
Thanks!
1. Classes to group transitions are an excellent idea, sign me up!
2. Is there a way to control the z-index of each group? In a grid, if one element is removed and a new one is added, I'd like to ensure the new one is above the old one. (note that I tried using z-index based on a group having an only child, no sure it's supposed to work)
Thanks!
@chriskirknielsen z-index should just work on groups. Do you have a reduced example of it failing to work?
Sure thing, I'll get a reduced example set up and ping you with a link! While I do that, just to show the piece of code I thought would work (and maybe it does and my setup is breaking it?):
```
::view-transition-group:has(::view-transition-new(*):only-child) {
z-index: 10;
}
::view-transition-group:has(::view-transition-old(*):only-child) {
z-index: 0;
}
```
```
::view-transition-group:has(::view-transition-new(*):only-child) {
z-index: 10;
}
::view-transition-group:has(::view-transition-old(*):only-child) {
z-index: 0;
}
```
Sorry, I was out (also sorry for pinging you on a weekend, didn't expect an answer but I appreciate it!), so here's my minimal example: https://codepen.io/chriskirknielsen/pen/rNZJwxx
If you click "Worst" first, then "Best", you should see "Kitt3n" disappear, but layered on top of "2 Cats 2 Curious" (which exists in both filtering states). Admittedly, this "minimal" example feels a little complex already, so it's possible I've taken a wrong turn somewhere.
Thank you again!
Atropa Birdperson@jaffathecake any signal from Safari WebKit and Gecko on supporting this?
@phx could I persuade you to read the article? š
@jaffathecake aaah I missed it. I've gotten so used to looking for those table sort of compatibility boxes on caniuse and mdn. Maybe something future articles could feature, even if the answer is "only chrome has itā?
@phx https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility - but I don't think that tells the whole story. The GitHub links in the article are better I think.
View Transitions API - Web APIs | MDN
The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
@jaffathecake yeah that's fair, and understandable to not want to continuously need to update the article with each development. Hopefully see Safari support, with Apple's sudden interest in building a good mobile webapp experience. Hopefully not gated behind home screen installation this time.
kirch@jaffathecake DHTML transitions are back! IE4.0 forever!
Stuart Langridge@jaffathecake finally got a chance to read this, and hooray. Quick q: "To move this forward we need to figure out how each page opts into the transition. Right now we're using a meta tag" -- why does a page need to opt in at all? Shouldn't it just work? Is this a temporary thing? Or maybe so pages can declare that they don't want to be animated to, just linked to?
@sil hmm, this would mean we ship MPA transitions, and all of a sudden _all_ same-origin navigations cross-fade (since that's the default).
Worse still, say a site figures out how to animate from their index to article page, but then you navigate from the index page to a profile pageā¦ and it looks fucked up because they didn't design that transition.
@jaffathecake hang on, all? if you don't do the startViewTransition stuff at all, you still get a view transition? did I misunderstand? Or is the point that if you turn on one single view transition for one single thing, it does it for every same-origin nav away from that page even if you didn't want it?
(I agree on the second point, which I hadn't thought of.)
@sil startViewTransition is the opt-in for SPA transitions. It's how it knows when the change happens. We don't need that for MPA transitions, because we already know when the change happens.
That's how this demo has transitions (in Canary with the flag), even though there's ZERO BYTES of JavaScript involved https://deploy-preview-27--http203-playlist.netlify.app/
@jaffathecake ohhhhh. I didnāt realise that! Ok then yeah, I now understand why you need some notion of opting in.