089: View transitions

Key Takeaways

[Music] hello and welcome to the CSS podcast today we're diving into a very smooth new web feature called view transitions this exciting feature allows you to have Rich visual transitions between various views of your website whether that's between Pages within Pages or even with and components now this is the CSS podcast and this feature certainly requires CSS but it also requires some JavaScript too so we hope that you're ready and for the first time ever on the CSS podcast we have a guest on our Show drum roll please promise bam hey who is going to break it all down for us and teach us how to get started with you transitions I'm so excited to have you on the show today very excited to be here and very excited that I get to talk about view transitions because spoiler this is amazing yes it's an awesome feature if you haven't played with it yet hopefully you'll be inspired to today um I'm also excited because bromas is also a developer relations engineer on the Chrome web UI team so we're sort of completing the trifecta here today and getting the whole gang together so welcome to the show BR I'm not excited though I'm I'm I'm indifferent and depressed classic Adam classic Adam just kidding welcome oh man so stuck I feel like this is a long time coming and this topic has been so fun for me it brings me so much excitement it brings life and positive ux feedback to the UI and I can't say enough good things about view transitions they are just awesome but first things first to set the record straight view transitions is not a chrome only feature it's just Chrome first so misconception uh because back in the day it was Prototype in Chrome but since then it's become a fully-fledged web standard that other browser vendors can add to their browsers and they're working on it I'm sure bramis is going to tell us all about it speaking of of the browsers right now oh it is in Safari about to ship same document transitions which we'll talk about in Safari 18 and Firefox has started prototyping their implementation too so it's on the way yeah it's very exciting with a little bit of luck we'll get view transitions like cross browser maybe around the end of the year so yeah exciting fingers crossed that would be a great gift so yeah but like let's let's start with a start right let's let's explain view Transitions and let's start with an example so um imagine that you have a photo album with a grid of thumbnails and then you click on a thumbnail and you end up on a different page with the photo in the large view so you have an overview page and a detail page two different layouts and right now without VI transitions if you just click on the thing you have this rough cut it just swaps out from the old view to the new view and that's it but with view transitions you can have it transition between those views so for example you could have the thumbnail that you clicked can visually grow into the large photo on the detail page while the other thumbnails fit out the header side of the screen and so on and so on so there's a rich transition between these two views and that can actually enhance the user experience because like if I see this as a user if I see the thumbnail grow into the big photo I get it and we see this's a lot of native mobile apps by the way like where things move as you navigate app well right now but soon you can do that on the web yeah so I've seen a lot of different examples especially from YouTu lately like on Adam's personal site nerdy dodev there's a great example of uh going from a list of blog posts where when you click on one of the cards the title gets bigger and moves into the next page so you get some context for where you're coming from and where you're going to as you navigate that web experience so that's cool I've also seen some examples where you could click on say an avatar and then it would get bigger and move on to the next page so you could have some kind of like profile card that then goes into a profile of view there's a lot of different ways that you can use this um for those page views that are pretty cool yeah agree the continuity is super cool thanks for bringing up my site I totally should have listed that as an example here and I didn't it definitely has same document and cross doent view transitions uh another one I seen in the wild bringing up mobile is like stack Navigators where like a screen gets pushed back and a new one slides up and irely like this used to be really popular in iPhone 1 where you'd swipe in this new page and see the other one Fade Into the background and creates the sense of a stack and then you know where going back is to it's going to go back to that previous one that got pushed backwards you got animating images in a light box so it just maybe not even going to a different page it's just opening up in a gallery view uh we've got isotope examples where you're shuffling cards around and instead of just instantly changing they move to their new location and that's really slick uh I got a morphing button example where you click button and it's got a loading State and then it sends a message to you and then it changes to another loading State and it goes back and all that can be handled with view transitions you'll find links in the show notes to all this I Candy pleasure yeah some of the examples that I've built are things like to-do lists where you could remove items from the list and it sort of automatically transitions or rearranging um in a playlist your songs and you can use the buttons to sort of shift things around and use view transitions to automatically have it transition in a very smooth way without having to write all that logic so I I think it's cool to see this as like a full page thing but I also have used it with the smaller components so I like that you brought up a button too cuz that little morph can be really useful where it's just happening on one part of the UI but it could look really nice and I recently used this on a site called anchor tool.com where I'm changing the position area of anchors which we just recorded a show on so listen to show about anchors and I'm able to use VI transitions in a way that kind of makes up for something that doesn't work in CSS yet and that's transitioning position area for anchors so it's kind of like a catchall feature that lets you make things nice and smooth and I know that we also talked about the browser support but this is also a feature that you can progressively enhance where things might not work the exact same across browser experiences but you'll still get the current experience which is usually that you're just transitioning from thing a to thing B this is like the nice way to do that in between I'm sure we'll talk about Progressive enhancement later in the show but let's get into how these transitions work so how do these work behind the scenes under the hood what happens here yeah so um well let's let's let's start with a small overview first and then later on WE we'll dig into the details but like at a glance VI transitions need three steps so step one is that you need a trigger to indicate that hey there are two different views so uh that can be like a navigation from one page to the other but it can also be invoked through Javas script but like as I said more on that later then the second step is that a browser will take snapshots of the elements that appear in both views like remember the thumbnail and the big photo that I told you about well it will take a snapshot of that thumbnail version and it will also take a snapshot of the big photo now these are not screenshots because that would be a bit too simplistics but again more on that later and the third step is that once it has these snapshots the browser will then animate them from their old position in size to their new position in size all while doing a cross fade between the old and a new snapshot so to reiterate you you have a trigger followed by snapshots that get taken and then finally the snapshots get animated gotcha all right so the triggers are kind of this clutch moment right now where it's like what kind of triggers do I have how can I Trigger or what what are my trigger options yeah so here here's the part might get a bit complicated because we we have a distinction to make you have same document VI Transitions and you also have cross document VI Transitions and same document VI transitions those are View transitions that you run on the same document and this is typically the case in an spba where you mutate the existing document but to be clear here as well like there's no need for a fully fletched Spa you can also do simpler scenarios such as reordering items on a page um so so you don't need to go all in on a framework you can just have an existing HTML page and that a little view transition on there so that is a a same document view transition because you're running it on that very same document and to trigger that you need a bit of JavaScript you call document. start view transition that's what you need to do and the argument you pass into that function is a call back that updates the Dom so for example in that function you could add a class onto an element to make it bigger so you would have document. start view transition in there you would have the function and inside of that function it would add a class to that specific element and the browser will use that document start view transition as the boundary to take the snapshots it'll take snapshots right before it involes invokes that boss in call back and it will take snapshots after it has invoked that call back so that way has a snapshots of like BO old and the new uh state of the document so you use the document. start view transition for the single page applications right yeah what about cross document view transitions cross doent view transitions is when you run a view transition between two different documents and this is the case in npas also known as websites uh yeah just websites like you have two HTML Pages they work together that's a website so the the trigger for that uh cross document view transition is a navigation from one page on your website to another page so that can be a link that you clicked but for example it could also be a form that you submitted because if you submit the form to somewhere else it's also a navigation to a new location yeah that's a good example yeah and it's it's that navigation there that forms the boundary line to take the snapshots it takes snapshots of the old page before the navigation is committed and then after the navigation was performed and the new page is ready to render for the first time it will take snapshots of that new state one caveat with that though is right now this is limited to same origin navigations we might look into opening this up in the future but no promises there it's all yeah still being discussed wait so what describe same origin navigations the easiest way to explain this um but it's it's not 100% correct but like you can have a view transition between uh web pages on the same subdomain roughly speaking so you could have a view transition from y.com oh I wish I owned you.com it's. yes so you could have a view transition from un. IM y y That's right right un. IM yeah dropping your site here you know. I am from the homepage to the about page which is hosted on the same domain uh but you can't have a view transition um from nerd. to un. IM because those are two different Origins so that won't work so that be cool though yeah right now you're limited to to your own s uh you you can't do view transitions from Adam's sit to you site or back yeah or my site yeah that makes sense gotcha so the trigger in a site is just navigation of any kind y clicking links submitting forms okay so that's easy and that's why there's no JavaScript required because the browser is like hey uh we don't need you to tell us you're changing the page the user clicked it and we're going to change the page so we'll take the snapshots before and after and on the same page like if we're in a is we're using JavaScript uh a click a form element getting input change events or just any sort of event can then trigger JavaScript which your JavaScript then signals hey take a snapshot now because I'm about to mutate the Dom and then you mutate the Dom it waits for your call back to complete and then out has the two snapshots so is that a good Roundup of like MPA versus spa and the JavaScript versus node JavaScript scenario sounds perfect red all right so speaking of uh the snapshot so we we we have our trigger we we have our document startv transition our navigation now we need to take snapshots so the browser will do this for you take snapshots of the Old State and the new state but in order to do that the browser will need some clues for that so that it knows what to capture and it's you the author the web developer who needs to provide those Clues to the browser nice and so this is where CSS comes in here comes drum roll CS says so we got this new property called view- transition Dame and its value is a custom identifier which is uh roughly a word that just means you're going to you're going to name it you're going to give it your own name so for example like that thumbnail on that overview page that you clicked could be given a view transition name with that you set it to photo that way the browser will snapshot it and temporarily store that snapshot with the same name of photo and on the new view so the page with the big photo you also use that same view transition name property to give a big image snapshot a name and the thing here is you also give it a view transition name of photo that way the browser knows that these two snapshots form a pair you've got the small version in the Old State and the big one in the new state and uh by the way you get one set of snap shots for free because the user agent stylesheet comes with a view transition name on rout set on the HTML elment itself nice yeah so you got one out of the box sometimes you want to undo that though um in that case you can set it to a value of none and none says you have no view transition name and then it won't be snapshotted so that makes sense I so I know that you also mentioned with view transition name the example you gave was just like Photo you don't necessarily need to Double Dash this but recently we've sort of been talking about it being more of a best practice to add the double dashes which is totally valid because it's a custom identifier it also helps you identify that this is a user created name value so you could call that-- photo just as a way to different iate things that are coming from you know CSS that are keyword values from things that you invented so I like to use a Double Dash regardless of if you need it or not in this case it's not required but I think it's like a nice best practice to kind of keep in mind when you're naming things yeah same here it makes it really easy to scan like you you can you just scan your code and you see oh Double Dash I use that I named that so yeah but with all these names in place you have your snapshots stored with that name all for free the browser does it for you yeah so you said snapshot a couple times but it sounded like you were sort of describing screenshots it do you mean screenshot or is it different is it the same what do you mean by that promise yes I know um the screenshot as a term doesn't cut it here like this is because the new snapshot is not a stale copy but it's live one it's a live snapshot so um if you capture a snapshot of a diff with a gif in it in the new snapshot that gif will play while the transitioning is happening it's a live view oh right that's that's awesome yeah this is triggering Frankenstein in me where I'm like it's alive so like videos will also keep playing yeah right they do I'm I'm seeing like a wo face but I the the wo face was me I didn't hear you there oh we're so professional so videos will keep playing too then not just gifts like if you have any kind of media that's rolling yeah exactly so uh to be clear that's only videos in the new snapshat um you can think of it as replace element like um replace content that is shown there um it won't be playing in the old snapshot because the the old snapshot that's a stale one so that one is a screenshot so the old one is a stale one and the new one is the live one and then snapshot is like the 100% technically correct term for this nice nice so if you declare something like view transition name say photo or Das Das photo on both images and both views could I also give other images if you transition name a photo or is it only on specific like IDs is this a class situation or an ID situation it's an ID situation so the names need to be unique in each view um so if you want to name the other photos as something you would name them photo one photo two in the old View and also photo one photo two in the new view um and so on yeah if you want to transition them it is but don't fret about messing this up by the way like def tools will show you a warning in the console it will say like hey I couldn't start a view transition because you have clashing names oh so it won't even run yeah exactly exactly and death tools will tell you why got it got it one of the things I like to do is put the URL of my destination page in front of the name so that way that particular photo that is going to that destination has a unique name because it's using the URL so I just kind of like prep pinned that word photo with the URL and kind of get myself out of coming up with all these unique names like Photo one photo two photo 3 um so just a hot tip out there for anybody yeah I'm too if you're creating a lot of these you might be dynamically creating them and setting them maybe in the Dom like inline CSS because that way you could dynamically update like with a unique ID as you're creating your element that's probably how you're going to do a lot of these I mean that's how I do things like anchor names if I had a bunch of like tool tips on the page so you can kind of have it in your CSS file or in line on the page especially to just differentiate from other transitions yeah it totally makes sense to to like add these as since you're generating markup all the time anyways you can you can add these names dynamically another nice thing here by the way is that these view transition names they don't need to be added to the same type of elements so you could add the view transition name of dash dash header to a header element in one View and you can also use that dash dash header name on a div in the other View and then the the header will transition into the div uh that makes me want to get weird like right now like I want to go more more weird things together like a a button that turns into an image an image into a paragraph I don't know a a little thing into a big thing I I don't know this sounds really fun why have I not explored more with weird view transitions it would be cool to transition like an SVG icon into like a more graphic photo too as you move yeah that would be cool yeah you can you can perfectly do that yeah I haven't seen that I don't think a lot of people are doing that right now oh yeah what about a popover showing up from the button that you click so that that it looks like it came from it you know but it it didn't oh like oh like like the close button would maybe morph from that button oh that's even cooler idea yeah so the button you invoke it morphs into the close button and back the wheels are turning I'm going to go build that now yep yeah and the thing that enables this is like the the whole snapshotting process like some people like often respond like okay but why do we have these snapshots like I want to actually transition the element well if you were transitioning the actual elements you couldn't morph the button into the image and the image into the div so these snapshots are like a really powerful thing um and also what these snapshots um allow you to do is what what's happening there is that while the view transition is running the Dom underneath has already updated so that way there are like no accessibility implications because um the new Dom is already there then you get these snapshots animating to uh their new place so if you want to take like a peek under the hood uh there like okay but when do these snapshots get taken well the browser like uh pauses rendering for a little while so right when you call document. start view transition it takes a snapshot and then it pauses rendering it updates the Dom then it renders it but you as a user you don't get to see it it takes new snapshots and then it can run the transition so you use like one or two frames in between and then it runs so yeah amazing stuff okay so speaking of frames in between all that good stuff we talked about you know how you create view transitions we talked about setting up names and setting up unique IDs for these view transitions so now what happens how do you animate these transitions what happens in that in between uh well the browser does a lot of work here for you um because you by default you don't have to do anything here because you you get the animations for free that's my favorite way to use your transition call documents start with your transition and you're done you have a navigation and you're done that's all you need to do um so what the browser does for the animation part is that it will construct a tree of pseudo elements onto the root which will then animate using CSS animations um it's a bit complicated but like bear with me here and yeah if you can't follow here there's some good visualizations that bromas made that are linked in the description and I would highly recommend you check out those visualizations I'm a very visual person that's how I learn that's how I understand this especially this part because there's a lot of complexity in how these snapshots work and how they move into each other so definitely check check out the show notes yeah because otherwise you you you you might get lost there but I'll I'll try to walk you through it so we have a tree of pseudo elements and let's start with the first one which is the colon colon view transition pseudo so that's colon colon view Dash transition pseudo element and this is a layer that gets rendered on top of the HTML element and all the snapshots will get nested inside of that pseudos inside of that one pseudo and so then for each snapshot pair that you have you get a little mini tree which is a child of that colon colon view transition pseudo element um so for each snapshot pair you have this mini tree and the mini tree consists of a view transition group pseudo element at the base and then in there you have a view transition image pair pseudo element and then inside of the image pair you have two other ones which is the view transition new and the view transition old pseudo element so these are all pseudo classes that the element well pseudo elements I mean that the uh browser creates as you're doing the transition from one stage to another yeah and uh you don't have to do anything for this like the browser will do it for you and you might be Wonder like okay but why so many like can't you just have one or two no I know but each each one of those has a meaning and a purpose so let's start top down so now I'm like not walking down the tree I'm going from the top of the tree back to the root so the view transition old uh pseudo that's the the one with the old snapshot where the old snapshot gets r rendered in and then the view transition new pseudo element that's the one where the new snapshot gets rendered in a default animation while the view transition is running is that the old snapshot Fades out and then the new snapshot fades in and these two pseudo elements they are contained within the view transition image pair pseudo element which is to keep the old and new snapshot together and it also has blend mode isolation applied to it to make sure that the blending doesn't affect any of the visual layers underneath and finally the image p is a child of the view transition group pseudo and that one is responsible for the dimensions it will nicely animate the position and size from the old snapshot to the position and size of the new snapshot and if you open up Dev tools too while you're doing a view transition you can see these in action you can see them getting created and that really helps too if you need some kind of visual on what's happening on the page that's a hot tip yeah open up the animations panel slow down animations do your view transition pause it you can go inspect all of these pseudo elements it's really really nice I have a question that just popped up for me so these are on Route right these pseudo elements are are they above the top layer uh they get rendered in the top layer and as you know with the top layer uh the last one that gets added to it gets render on top so they will be on top of everything else oh sick I don't think I knew that when you're looking at them in the in the elements panel after you've done kind of what we just described pausing the animations they're on the HTM ml route they're not in the top layer little twirly but Okay cool so they're in the Dom Penthouse that's all I was like wondering I was like Dom Penthouse yeah they they they get injected onto the rout because that's where you started the view transition and little teaser for the future maybe will allow you to have element transitions so instead of calling document. startv transition you can do like sidebar. startv transition and then all those pseudos will get rendered into that sidebar but right now for now they they get rendered onto the root element which is the HML element and that way you you can select them in your CSS but yeah they get rendered on top of everything else perfect thanks for clearing that up cuz well we talked about the top layer a couple episodes ago and I'm like how does this compare are my dialogues on top of my pseudos and it doesn't sound like it these pseudos also and I'm so glad to have you explain them again because while I've seen your talks and I've inspected these pseudos I still forget about them all the time but it's clicking more and more as we go like the browser is generating an animation for you and multiple layers so that it can optimize these things it can optimize blending the cross fading and the position animations um like things can grow things can shrink and they can move around the screen all I have to do is give something a view transition name and make sure that there's a pair to deal with so that the same name is there before and after I call JavaScript or after the page navigation and I'm good to go oh yes that's even optional like you you can do transitions few transitions with only like something being present in the Old State or something only being present in the new state and then you can use CSS to customize the animation H but I think we'll we'll cover this a bit later on oh yeah customization is a whole separate area but before we get into that to recap this and all the pseudos you have an old and a new pseudo with the snapshots that we talked about and then those are contained inside of an image pair pseudo and then that's contained inside of a group yeah exactly you have like the layering yeah and you have this little mini tree for everything that you captured with a view transition name so if you capture a header and a photo and a footer then you'll have this little mini tree for the header the footer uh and also the photo yeah okay cool do you have a visualization of that too yeah okay because I think that that would really help when you see how everything kind of stacks together especially different parts of the page as you're doing the view transition just getting the your mental state right it's hard to listen and like understand what we're talking about but really those visualizations help definitely uh check them out if you're starting to get a little lost in the in the pseudos yeah you can find the link to those visualizations in the show notes so be sure to check them out yeah those are really helpful just knowing that that uh I think it's the image pair that does the blend mode right yeah I have a demo where I take a a flexbox visualizer and I change the blend mode to add some gooey effects so like I do the blur plus a bump of contrast and try to make the images as so these snapshots as they cross each other turn into goo and then go back into regular so yeah these little details can end up being really important about you finding a neat little trick and out of how they work I love blend modes I'm happy that they're coming back yeah we got plus lighter was added especially just for that one I don't even think we've talked about that on the show but oh we haven't yeah so mys for next episode yeah we should I mean then we should talk about plus darker and why it hasn't been implemented yet uh we can get there all right so okay you you mentioned briefly about what if there's not a pair right so let's say you have a description to show under her photo but it's only on the detail page so if you capture that with a view transition name of description you end up only with a view transition new when going from the overview page to a detail page okay cuz the only that only exists on one of the two states what do we get to do with that yeah well the cool thing is here like these get injected as pseudo elements uh and you can combine them with with other selectors so you could to select only the new or like to detect if there is only a new you could write a selector in your CSS col on colum view- transition-- new then open the parentheses and then put the name in there but then follow by a colon only- child so that it knows that it's the only child inside of the image pair and you can respond to that you can like a different animation oh if there's only one in the old snapshot then fade it in if there's only one in the new snapshot no if there's only one in the old snapshot then fade it out and is there only one in the new snapshot then fade it in if there's one in both I'll just move it around on the screen yeah so that that brings me to the next section which is about customization because you can customize these as you want because few transitions are powered by CSS animations so you get to write some CSS to control how they should move and what they should do it's it's very powerful stuff um yay yeah and and yes's podcast wo and the simplest thing that you might want to try out in the beginning is to change the speed of the transition and for that you can use the animation duration property because yeah these are CSS animations so if you target your uh view transition group Pudo and you set the animation duration to two seconds there well the whole thing will animate slower it will animate over a time of two seconds and this is why it's really important to know what those pseudos are because the pseudos are the selectors that you're applying the styles to to create the transitions so the selector is the one that needs the argument if you set it to the star selector then you target all groups but you can also set it to a more specific name so to Target only the photo snapshot you can use something like col col view transition group and that's what Dash is so view- transition D group and then that's a functional pseudo element where you could have photo or the name of the view transition inside of that to be more specific on what you're targeting and you're applying the styles to yeah and this is cool like you could have a default animation for all the groups and you can say like no no the one photo you get a special treatment you get a different animation and yeah so the animation that you get right now by default the old one Fades out and the new snapshot fades in but say like for example you want to shrink the old snapshot and grow the new one so that's like a scale up and scale down scenario well you can change these by setting the animation name property and one scenario where I'm using this is like when I when I slide from one page to the next page in a pagination so if I if I go like from page one to two I slite everything to the left but if I go from page uh two to one I site everything to the right and for that I use the animation name property which I then set to either slide left or either slide right yeah those are the details that are important it's really nice yeah I like changing the easing too because at like you can change the duration of all of them all at the same time or you can change the easing of all of them at the same time or sometimes you don't need to fade in or fade out any of the snapshots because they haven't changed like I have this demo where you reorder a bunch of cards and only their position changes so that if I set display none on the old snapshot and animation name none on the new snapshot uh you can kind of immediately see the new snapshots you can sort of like nullify or cancel some of this stuff for even better control it's like knowing these mini trees is really helpful for you in selecting targeting and customizing what you get yeah yeah that's that's the isotope Recreation that you did right I think you were also using um the old and new pseudo selectors in there in combination with the only child pseudo class right I was yeah and that's cuz uh so like when I'm filtering elements I like to think about these things as like exit stage and enter stage and sometimes something is still on the stage but has a new position and so these selectors let me Target them so I'm like hey if the new child view transition new is an only child meaning there's no Old State it's entering the stage from the first time and so I scale it up and give it nice little presentation as it's entering in vice versa if there's only an old and not a new then I can know that where I'm going to this element isn't there anymore and I can Target those and give them a scale out animation and then I can customize with a nice springy easing if there is a pair there's an old and a new and I know that on stage and it's just going to move somewhere new and I'll give it a cool little springy effect all really really fun stuff to do right inside of CSS yeah I suggest you all just go play with it set some duration set some animation you can even set like an animation delay if you want it's really powerful that you get to control this using CSS that said you also have some JavaScript customizations that you can do because when you start a view transition using document that start view transition you get back an instance of the view transition class so you get back an object and this object has a bunch of promises that you can respond to I love these promises these come in really really handy just from like framework integration to just timing things and also having that programmatic control is really nice so like the first promise is an update call back done promise which gets triggered when the update call back is done so that's like when your call back function that you provided has completed so the object that you get back will also tell you when that function has completed so it's basically like when the new Dom is in place a second one is ready when uh which gets triggered when the snapshots were taken so you also have access to that sort of state and the third one is when it's all finished when the view transitions have finished and these promises can be really they're almost like required in some states where you're like I don't control the rendering like in a framework example like so you start your view transition you save the object uh you wait for it to finish meaning that like I'm going to set some new state inside my call back let react do some things wait a small amount of time or even get a call back from react and then complete the promise and I just get to time it all really nice it's good stuff yeah I use the the Finish promise a lot like if I want to do some cleanup afterwards like after the view transition did finish uh running then I want to do uh some cleanup the ready one is also a handy one because that one will reject if the snapshots could not be taken and this is the case when you have like clashing view transition name values so you can like add your own logging to it as well by checking uh that promise and apart from these promises there is also a method that you can call on the object check which is a skip transition you can call this at any point in time and it will well the name kind of says it will skip the transition yeah so is this like generally the overview of so we went through you know how you create these snapshots how you name them how you animate them customization it's a lot of stuff to kind of keep in mind but it's a really powerful feature and again you can just use the auto Styles which I've mostly used where you don't have to do the customization I think it's really nice and again we're going to have links to the show notes with demos that do more advanced changes so you can see how to do that from an example point of view but it's a really powerful feature where you essentially just have to either wrap your transition in JavaScript or if it's a multi-page app don't even have to do that you just have to give it some names and the browser will do a lot of this for you it'll create all those pseudo elements it'll automatically figure out how to move them from one to the other in a nice smooth way and it's just a really nice feature to try out especially when you're thinking about adding like a little extra touch which is why I think This lends so nicely to pressive enhancement because it's something that you don't require for a user experience but it could be a nice layer on top of his user experience to just make it feel so much more smooth so as we get towards the end of the show let's just do a quick reminder about what the browser support looks like yeah so right now um Chrome is shipping both forance um so we have same document VI transitions which shipped in Chrome 111 and cross document VI transitions that just recently shipped in Chrome 126 so that was I think it was April this year that it shipped um Safari is currently finishing their implementation in Safari 18 which will be out this September if I'm not mistaken and they also have expressed their support for cross doent forign so personally I'm expecting this one to like pop up in Safari technology preview anytime soon or it did already pop up pop I'm I'm I'm not even following anymore but like the the webkit team at Apple is is really on board with this and they're going full troll on it so that's very exciting nice and Firefox finally they have started to prototype same document VI Transitions and are aiming to ship this in the second half of 20124 whoa nice and there's also some Frameworks and libraries that are shipping view transitions like Astro natively because it's such a nice feature that you can just add on to your web experience and so I think it's really cool to see this kind of growing and growing and the positive support from the community and to see more and more examples and demos of this especially in production it's really cool yeah there is so much more to view transitions too just love this breakdown so far um we're going to have links in the show notes for all sorts of more stuff we'll kind of keep it to this I did notice we kind of skipped one thing it's like the one of the easiest things that you can take away from this show and just go do right now because there's no side effects is ADD at view transition open up your curly brackets navigation colon Auto to your website and if you have multi-page site where you know people click regular links this will cross fade between your pages um you don't have to use VI transition names or anything you just add this little snippet and in Chrome people will get crossfades which is a really nice sort of default and it's a oneliner to add to your your site yeah we we have that and much much more covered in our documentation over the over at developer. chrome.com there's like a bunch of practical things on how to do VI transition between snapshots that have different aspect ratios and how to show this video playing and so on and so on um we also cover some extra properties and features that you can use such as view transition CLA to share animation Styles view transition types to style various transitions differently without the Declarations of the one stepping onto the toes of the other and so much more like there's also a section on page Swap and page reveiew that we haven't mentioned like these are two new oh yeah yeah these are two new events that you can use to customize your cross document fre transition object because like in in the same document version you start a view transition and you get the object in return but where do you get it with the cross document version well beop and Page reveal are the events that you need for that yeah so lots of stuff definitely there to explore more features in the Horizon I know the team is still actively working on what's next even looking at things like possibly gesture driven view Transitions and how you can access some of these things in different ways um so definitely a lot to cover maybe a lot more in a future episode too once there's more landed yes as a little teaser like the stuff that we're we're discussing right now is like a layer capture mode which makes the capturing much nicer for you cross origin transitions auton naming snapshots scope transitions where you call Elemental startview transition instead of documental start fre transition and so so much more some of these features will make it some might not it's all a bit handwavy at this very moment but like yes we are actively discussing things behind the scenes and the most important thing that I want to note with that is that your feedback is very very welcome here so if you have a feature request for view transitions if you think like this is not working for me or I want to be able to do this but it's not possible right now please please let us know reach out to us on social media or whatever shoot us an email file an issue with the CSS working group yeah please let us know what you want to see next in view transitions yeah and would you say that the CSS working group GitHub repo is the best place to kind of see the current status and conversations too or is somewhere else you could try and follow that but like it's a lot there's a lot of view transition uh discussions happening there because yeah we we want to make sure that we get this one right uh we we talk with all the other browser venders there as well so yeah if if you want to check it out you can but be warned it's a lot of people talking and a lot of replies going back and forth It's technical y I tried to I tried to hang in there for a bit and I'm like ah bramis has this I'll just uh yeah I think the easiest way to follow this one is keep keep an eye on our Blog developer. chrome.com watch our Google IO videos because like in 2023 we had a Google IO video on view transitions we had one this year in 2024 and I'm like quite sure we're going to have one next year because there's so many updates coming to view transitions y well it was awesome to have you on the show bromas thank you again for joining us and for all the content that you create around view transitions making this easy for people to understand and to use and for your work in making the API shape something that solves the problems that we're trying to all so huge props to you and for our audience thank you for making it this far as always thanks for joining us we have lots of stuff in the show notes for you yeah if you're a bit woozy right now from all the info I totally understand you no worries take your time play a little bit with it and one day it'll click yeah it's so true and if you got any CSS view transition questions or even JavaScript ones we'd love to answer them on the show just tweet us with the hash CSS podcast and we got you back yes I'm @ youa on the Twitter that's ATA I'm at Argy link a RG y l i n k and I'm at bramus b r m us we all have good handles good job us yeah we got we got shorties and goodies I agree well your question could help a lot of people and if you like the show please give us a review on whatever podcast app you are using or share this podcast with a friend because those reviews and those shares help people discover our show and it helps us have more time to deliver better content for you thanks y'all looking forward to your questions and we'll see you next time bye everyone bye [Music]