Native cross-page transitions, a look into the future!

[Music] [Applause] [Music] finu agency product Community that's having sweet hey hello everyone welcome back to another Friday technical live stream I'm excited today we're doing some cool things and I'm already seeing some comments about people excited for this so uh welcome everyone I appreciate all of you coming here either if you're watching it live or if you're coming in the future um but before jumping into it I'm gonna wait for a few minutes until you know everyone joins so let's just say hello in the comments any anybody who wants to just throw some love here to the community or to me just feel free to do it and in a few minutes we'll start okay hey oh my God the first name is already so hard to pronounce no nin I'm probably butchering your name I'm so sorry hi thank you for coming hey theit it's good to see you hey exam barad thank you for coming hey Pablo hey Fred and hey another Dimitri nice Freddy is saying all right it's useful technical stuff day again I mean hopefully every day every Friday it's technical stuff that it's useful but the the thing is that today um what we're talking about basically applies to like most of the sides some Fridays we talk about things that are very Niche very specific and depending on what you're building maybe you're not interested in it but um we are web developers and what we're showing today it's something that essentially it's a benefit for everyone in the web so I'm excited the matri I appreciate your love thank you okay nice two more minutes and then we'll just jump right into it I don't know how long will today live streams be because the nice thing of what we're talking about is that it's pretty simple to use and set up so um it's probably I'll have enough time to talk about it um but I think that it will be nice if you guys can help me during the live stream come up with ideas of ways to to use the functionality that we're talking about because you know there are thousands and thousands of uses but I'm always I'm a very bad uiux designer and I'm very bad at coming up with cool things to build can we make it complex yeah um we can make it complex like if we come up with some proper idea maybe we can do like a second live stream where we attempt to do something very complex out of it I'm actually going to start by showing you a very well not complex in terms of building it but in terms of the result like it you know um it looks very complex it looks very powerful but let's wait one more minute I always wait until it's five minutes past the time to start diving into the matters let me say hi to more people hey harsh thank you for coming hey Nathan I appreciate you guys taking some time to come here with me and didn't say it but um I wish that everyone had a very nice week it's always Friday and what I love about Friday is that everyone can tell me how was the week usually it's good but if it's bad you can always tell me to hey crispy hey Bill Bill van there b ther H again hey thank you for coming okay great I think that it's time so let's just jump right into it so again welcome everyone thank you for coming today we are talking about one new functionality that it's still not um it's still not available everywhere so take this live stream as an experimental thing so we're taking a look into the future but at least we'll we'll be able to play around with with with it okay which is the cross document view transitions for multi-page applications okay and this is actually a pretty big deal maybe maybe you've seen in the past hey Clen thank you for coming maybe you've seen in the past already some um Native bu transitions that are managed by the browser right and it's actually something that we did a live stream I don't know it was like four months ago somewhere around that and in that live stream we we already showcased the powers of the native view transitions API which is an API that just using the browser apis so not really requiring some Library like gab or any other animation Library we can do very cool things like these very famous example that we saw a few months ago where just by transitioning through pages we were able to just animate things like let me see if there's one more complex example hey let's see another one like this like we when navigating across Pages we were doing these shared transitions but up until now the only um the only available API was for same document view Transitions and today we're talking about a new one it's actually the same API but it you know it's a different application and it's for cross doent view Transitions and that's a pretty big deal because cross document means that it it's across navigations across different pages so when you're on one page and you click on a link and you go to another page the entire page gets destroyed then you load a new HTML file with the CSS with JavaScript you load everything and then the browser just you know makes the swap right um in this example of the same document view transitions this was very not Niche but it was very the um the way that you would apply it would require still some some libraries because it would require some router some um JavaScript library something that were was handling on the same page without leaving that page loading the next document and then parsing that HTML and injecting it on the same page and that's that's what if you've been using any kind of web application in the last five years you've probably you know get used to it like you're navigating you're doing things that you really never leave the current page so there's a framework there's some kind of tool that it's managing this routing of loading the things and injecting them on a page this was up until now cross doent view transitions just simplify things a lot and by a lot it means a lot up to the point that we don't really need JavaScript to do most of the things like there are some things that we will need JavaScript and we'll talk about that today but um we can animate across Pages without even touching any line of code which for Waffle users you're probably loving that already this is music for your ears so um let's just start looking at that let me see one comment here exam sh share transition always remind me of the old material ey contact book transition yeah well I mean this is trying to um just get closer to the experience of navigating on mobile apps right when you have a mobile you're just clicking things around Everything feels very Snappy because you get all these cool transitions because everything is on your mobile you're not really you know loading more things aside from the dynamic data so this is one step forward to converting the web into the you know um the next level of interactions same as mobile apps let me show you a a cool example this example I have not built it this example was built by the Astro JS team and this example essentially it's just a clone of Spotify the cool thing of this is that there is no JavaScript at all okay even the the URL I'm going to share that hold on let me put that to G so G can put it here in the chat this example it's completely HTML and CSS no JavaScript and look at this if I start clicking around Everything feels so smooth look at this look at that what do you think about this it's so smooth and there is no JavaScript there is no Library there's nothing this is completely native browser and this is already working but only hold on this is only working for now in Chrome 126 and Edge 126 yes that's nice Pablo and Rahul hello thank you for coming so um just keep in mind first thing already last thing you here browser support it's still experimental it's still only available in Chrome so don't rush to start using that on your sites although you technically can like you know if it doesn't work it doesn't work and that's it but uh just keep in mind that it's not going to work in Safari or Milla and Arc probably yes because it's chromium based correct okay nice so um my idea today is to just together walk through this uh documentation this the official documentation by Chrome where they explain how to start using these API and just how to start customizing your site to be as cool as these Spotify clone by the Astro JS team okay so I've got this fresh want to call you a fresh clone of climent first I just did a couple modifications here with a couple Pages um and I want to start using it like there's no JavaScript there's no custom CSS there's nothing okay I'm going to show you nothing in the head nothing in the body anywhere if I go to the custom code there is nothing anywhere okay so let's start diving into the documentation by the way guys if you have any questions just drop down here in the chat I have my phone with the chat open so I'll try to address all your questions if I know how to answer them okay I'm kind of learning this with you to uh today but I've got got ahead a bit so cross document view transitions rely on the very same building blocks as princi and principles as the same document view transitions which is what we just saw the browser but um the idea here is that the browser is doing most of the job for us okay so the browser takes snapshots of elements that have a unique view transition name okay and this is important okay we'll see we'll see later in the live stream why this is very important on both the Old and the new page and then the do gets updated while rendering is suppressed and finally the transitions are powered by CSS animations okay so essentially what's going to happen is that we've got here our page let's call these page one like that and we have another page which is page two so the moment that the browser detects that we are trying to navigate from one page to another the browser will first stop and will take a screenshot of this current page okay so essentially we'll just scan all the page we'll scan all the elements the Styles the positioning of everything and just take a screenshot and then in the background it will load this second page and essentially will take another screenshot and what we'll do is then with these two screenshots it will kind of overlap them together to identify what are the differences between one and the other because if there is some element here that it's the same shared element across um in both in both pages and we'll see now how we can um Define elements so don't worry if the browser detects that these same element it's on both Pages then the browser will just handle the animation for us like we don't need to do anything the browser is more enough now to know how to transition from one ele not well one element from one aspect position whatever to another okay so let's just keep going here what's different when compared with same document VI transitions is that crossb document view transitions you don't need to call document view transition okay so in in The View same document view transitions you needed JavaScript you needed to make these um call this function and pass a call back to it and essentially would be the same behavior that would take a screenshot then it would wait until the page was rendered so this is when you injected that logic inside the Callback and then it would take the second screenshot but in this case in this case it's waiting just for the navigation okay uh in other words there's no API to call in order to start a be transition between two documents however there are two conditions that you that you need to fulfill okay that's very important both documents need to exist on the same origin okay and this means that if this page it's from example.com and this page it's from f.com this transition is not going to happen same origin means same domain and same port so if obviously you probably don't don't deal with ports in your dayto day but still there are ports usually depending on if you use H um https or HTTP there are ports and also there can be custom ports the thing is that these need to match even if it's the same domain even if it's these example.com but this is from one subdomain and this is another subdomain or the main domain itself these are not matching so the transitions are not going to happen here just keep that in mind it has to be the exact same origin here 8 it's probably for 8 CP right I always forget which one is it thank you ver anyways um let's just focus on the domain same exact origin that's important okay and then both Pages need to op in to allow The View transition so in one page you op in for the view Transitions and we'll see now how to op in and the other page let's just see that this is page one and this is page two but the other page does not opt in for be transitions then it's not going to work just also keep that in mind so how do we opt in into be transitions well this is what I was explaining about the same origin opting in P transitions look at that it's just this that's it CSS three lines of code which can be technically one line of code that's it so let's just try it out let's grab this I'm going to copy it and remember that we want to optain in all the pages that are going to be transitioning from and to so the smartest thing that you can do is just go ahead and put it in the global custom code this is the custom code that applies to the the whole project CSS is taking our job so I'm going to come here head code or footer code probably doesn't matter but let's do head code stall and in here I want to just paste this okay you're probably going to get an error don't worry that's probably because a code mirror the library that webo is using for syntax highlighting it's doesn't recognize this property yet don't worry Okay so navigation Auto we'll see now because there are different ways of um there are different properties for navigation the properties sorry values but for now let's just make things automatic this is now opting in both Pages because we are shipping that in the global custom code section so if we come to a project and we just navigate through the pages look at that that's it and end of the live stream that's it like I know that you can't see much actually let me change the text so you can see better uh this is the home yay and let's do the about page this is the about page if we publish this by default we'll see now how we can customize things but by default fold the browser will do already a smooth transition so you can see how the P the the home the title and the description are fading with a different text look at that and this is happening natively one thing to have in mind and that's what actually the power of this and it's that we are leaving the page check this out if if you see the the the button here of the reloading or you check the tab you will see how there's a loading that it's pretty fast but there's a loading there's the Page Changing okay and that's important it's different from the same page routing because if on the new page there are libraries there are anything that you know needs to be destroyed from one page and initialized on the other one this simplifies things a lot because you don't need to care about all these things you're yeah actually yes Bara JS just um well I mean still you know library is always going to get give you more controls but most of the use cases for things like Bara JS are not no longer necessary this is going to be so sweet for web apps like our Wiz apps that's correct Glen because this will work out of the box with wte you know when it was the same page loading then it was a problem because when when destroying the previous page and loading the second page you were actually never leaving the original page which means that any script tags anything that was running on that page was still running so you had to to take care about uh destroying the old scripts initializing again and then you know if there was any other kind of resource you had to deal with all that but now here we just loading another page that's it yeah last third party code always going to mean good side speed of course so that's it that's mostly it okay now these um let me zo out a bit the same principles that applied to um same view transitions also do apply to the Cross page view transitions which means that if we go back to the original documentation of same document view transitions we'll see here exactly how the transitions are happening the way that this happens is that there's a screenshot that the browser is taking and then the browser creates inject these studo elements that we can then use for um styling the way that we animate things so essentially here you can see how these pseudo elements can I zoom in yeah this in here creates this boot transition sudo element and then there's the FI transition group group and this group it's specific for a build transition that we Define by default the that the main view transition group will be the root and is essentially representing the whole page the document later in a few minutes we'll see how we can create another another VI transitions that you know represent specific elements on the page but essentially creates this group and then it creates this image pair where there is the old screenshot of the browser and there is the new screenshot of the browser and this can we can use it in our Vantage so if we go back here remember that we are dealing with these pseudo States um the pseudo selectors for the old transition and the new transition so I want to come here let's go and just in the global custom code I want to be a bit more playful and let's imagine that instead of doing these fade in and Fade Out native animation I want to do something like moving things like moving the whole screen to one side like you know like um scrolling by is lighter type of Animation so let's let's try to do that if we come here let's see um let's first of all Define a animation and this animation will be a slide to the left right I want to take this and move it to the left so if I do slide to left like this and I say uh two because I want to go to the left I'm going to say hey I want this animation to move from the current opacity to opacity zero like that and also we want to move the whole screen to the side so let's do uh transl X and this is going to be a 100 view width like that think that I did it right and then let's do the same thing but um this is for the page leaving but then the new page I wanted to come from the right so I want to create another animation that says uh let's say from scratch key frames slide from right and these key frames I want to do from again opacity zero because I want the new page to have opacity zero and to come in and translate x x from minus 100 view width like that by the way uh let me just uh announce here if you want to learn more about creating CSS animations for wlow there's a cool live stream that I did about three months ago two months ago just look in the F Channel look for something like CSS animations for webflow I think that that live stream can help you a lot just doing some publicity here okay so we've got these two animations okay so I want to Target these two states I want to Target the the old screenshot so the the old page to move it to the to the left and also I want to Target the new page to move it um from the right into the into the view okay so let's just grab this actually I think that uh for animating uh there was a specific selector no that's actually it I'm just copying from the documentation so let's do this I want to do a VI transition for the root remember that this is specific to the whole document to the root okay and I want this to be an animation and this animation is going to be uh it's the old one so I want to move it to left so it's going to be the slide to left animation and I want it to take let's do 200 milliseconds and let's do pleas in out let's do it cooler okay and then we want to do the same thing but for the new one so if we come here new then we want this to slide from the right and I want this to be out in like that I think that this is valid we'll see maybe I'm messing up guys I haven't tried this before but it should work so let's try it out let's see what happens so we're here okay we're doing some weird things so definitely did something wrong here of course build transition old the root slight to left let me see if I'm doing the animation right slide to left I actually think that I need to do this these goes the the last thing maybe just try it out like that transition new from slide from right let's just try ease for now let's not mess up okay let's try it again and if not don't worry because I have some cheat cheet that I will check okay this is absolutely not working and I need to understand why hold on a second H transition it is keepy frames SL to left oh about the the delay um let me fix this oh my God yes thank you uh not transition but transform yeah I'm here saying that that I made a live stream talking about CSS animation and I just WR wrote the wrong animations okay I was missing this and now Pablo I will I will answer your question which is but how do you select the delay to allow the animation to happen watch this look at that okay look at that this is native and you don't need any delay in this particular case because you want both things to move at the same time right you want the while the old page is going did do right because this is going this is going to the right I want it to go to the left so I think I did it the wrong way but still it's working but so while the old page it's moving the new page is coming in so there's really no need for a delay you want both things to happen at the same time but if you wanted to add some delay you can do it here in the in the animation you could just wait for some specific delay go ahead and check my CSS animations I think that we talked about that great Okay so we've got these animation for the whole page and look at that it's cool right now imagine that I wanted to do something you know more specific to an element if we go back to these examples from chrome nope not this one I think that this one nope let's see another one nope nope come on give me the the right one I want you to show you the animation this one okay so this animation that it's happening just taking one element and instead of moving the whole page um animating between two states of the same element what we need to do if we go back here to our drawings imagine that we've got this and this is an image which represents exactly our image here and here let's imagine that my image here it's a bit smaller and then the same image on another page it's bigger okay we need to tell the browser hey this is the same image because otherwise the browser doesn't know and then it will just make the whole a global transition for it so what we need to do is identify this element and the way that we identify It Is by giving it a view transition name like that oops one second let's make this small like that and this view transition name needs to have a specific property let's do Fu whatever okay and this has to be unique if there is more than one element on the page that has the same view transition name shit's going to break I'll let you know cuz I tried that in the past and doesn't work okay it has to be unique so if I come here and also identify this with the same build transition name what's going to happen is that the browser will identify this to be the same element and will just handle the transformation the transition between the two states they transforming with image to White youi frame yeah I think that's possible actually so let's just come back here and here in the homepage let's make this smaller I've already did that before okay so in the home I want these image to be smaller and in about I want the image to be bigger so if I don't do anything just to demonstrate what's going to happen if you don't add a an identifier one second today it's a bit slower well for publishing you will see how things just transition the way that they wear before okay so the whole page is moving to the side following the global animation now if we come here and just grab this image hero image and I'm just going to tell it hey V transition name and the custom properties in wflow actually come very handy because we've got the native way of doing it here in we flow without having to write custom code which is cool right let's do hero image like that okay so essentially the hero image element has a view transition of hero image and if we go to the about page because it's using the same CSS class it also has the be transition name equals to Hero image okay so if I publish this look at this look at that how cool is that essentially it's doing all the job for me the whole job just grabbing the image and it's saying oh this is the same image we need to resize it to fit the new position let's imagine that instead of resizing it let's do is small and also is right and I'm going to move this to the right like that super simple okay again I'm not changing any animations I'm not changing anything so come home and look at that now the image is moving from one side to another look at that so cool right it's very very very cool um which if you're already wondering this is how they achieved the hold on I forgot the link Astro Spotify I think I have it here this is how yeah cross twinning correct this is how they achieve this animation here essentially they probably have some kind of wrapper element here and it's identifying it to be the background so when they navigate to the next page the Brower knows that it just needs to scale it up to match the the the new background like that look at that isn't it cool now I think that to do these um when there are lists see how here there are lists now obviously this will be hardcoded probably let me just scan this because I want to make sure but I'm pretty sure yes this will be hardcoded because remember that we need every single element on the page to be unique right so essentially this means that this image has a specific build transition this image has a specific build transition name this image again same this image the same this image the same so in this particular case because they wanted to demonstrate that this can be done without JavaScript um they just hardcoded every single name of the build transitions right and we can see it here if we check this so you can see data transition scope blah blah blah and this has a specific transition name everything has a unique transition name okay but we don't want to do this because actually we want to work in wlow right and in wlow we've got things like CMS uh no verett I'm afraid that you cannot use the CSS variable uh at least I've tried it and I did not succeed and that's that's one of the downsides it doesn't work with CSS variables you cannot you cannot say something like um B transition name and then use a variable here H this is not possible okay so um here you could technically use a style attribute you're not wrong actually we could deal with a sty attribute okay I'm GNA do one thing let's do the hardcoded way like uh ver is saying because actually I think it's a good idea but then I still have about 25 minutes I want to show you how we can use some JavaScript to enhance the way that we Implement things okay so essentially I'm just giving you a quick hint when we are dealing with view transitions look at this how cool it is there are ways of customizing C crossb transitions with two new events that happen on the page which is the page Swap and the page review we'll talk about this but essentially these events allow you to modify the outgoing page and the incoming page before making the transition so technically with JavaScript you can go ahead and inject the build transition names for the dynamic elements so you don't have to be worrying about hard coding things okay that's important but let's just let's just attempt what exam is saying just for shits and giggles uh let's try to do PL Tex Custom Custom sty just for the sake of testing this oops I think I didn't save it hold on custom and this is some text nice save collection and just to put you in context the way that the reason why I'm doing this is because I want to create a cool animation that when I click on one of these elements it navigates to the new page but as you can see there is this image on the new page page so I essentially want the small image to whoop scale up fit the the incoming page but we need every single element on this page to have a unique view transition name and obviously I cannot do this I cannot come here and say okay I'm going to say uh V transition and it's going to be author image like this is not going to work because every single item here will have the same view transition name okay so this doesn't work let's get rid of it let's go back to the CSS CMS collection and let's start doing this just for testing custom style let's do uh vew transition name transition name and this has to be let's use these loog like that yeah I think that we can use this log let's try it I'm going to try just for these Jessica Miller so we don't spend a lot of time because I haven't tried it look at that Jessica Miller it's a man it's a black man so let's come to the settings and let's add a custom attribute that's going to be stall and of course it's reserved oh it was a cool idea but I think it doesn't it's not going to work because it's a reserve name so I think that we'll have to go to with the JavaScript option okay so stay with me let's attempt to do I'll just leave it here let's do the animation with the JavaScript so then we also see the the JavaScript API Al together and actually they have an example here we're just going to attempt to do the same thing as you can see here they already building this they just we when navigating the image scales to to fit the the page okay so we need to listen for these events the page Swap and the page reveal and we need to uh inject the inject The View transition name to the image of the outgoing element and the incoming element you can add custom element and use style attribute oh you guys are smarter than me you're right let's try it out I promise we'll deal with the we'll do the the JavaScript bit stay with me okay image let's do the source and the source is going to be the picture can we do it come on of course it's not going to let me nope so we'll have to also grab the image link come on guys give me more ideas how can I inject in a custom element the image link I will probably have to I will probably have to upload it in a document file give me yes I'm waiting for you name bio embed okay let's do emit then can I inject the field in the emit nope oh yeah picture look at that wrap the image inside a custom element that's not going to work because we need the the image to be the one that has the the be transition not the the element but ver is right let's do an image and this image the source is going to be the picture they there right yes and the CLA it's what's the CLA of this author item image so let's do this and then let's do style and inside the style we'll do the custom sty St here okay let's see if we did it right oh no hold on I need to make these properly fit so I need to have that image let me go back one second I need these image to be 6 RAM and six Ram which it is huh why is it not fitting yeah yeah technically I don't need the custom t fi now you're right I could just use the I can just use this right I could do view transition name and then in here I could add these loog for example right let's do yeah this log for now or we could do image uncore slug so we can do it better but now I'm dealing with my shitty design scales and it's that pH it's not taking the six Ram why okay done that's it fixed great okay so if we did it right then we've got this style v transition name equals to this now I'm going to go to now don't worry that did it's fixed now I'm going to go to the template page here and this image again I want this to be an embed and this will be all image I think nice great I think that that should make the trick let me just publish and we scan just to make sure that things are as expected so one second okay nice so we've got as you can see here if I scan this image we've got view transition name image Jessica Miller and if I go to the other one it's going to be view transition name image Jennifer Brown nice and then this one too so if we did it right just cross fingers because I haven't tried that hey look at that look at that yay obviously we've got this awful transition right now so let me just disable it uh disable disable no by the way no I'm not going to disable it I'm going to talk about a customizing the type because um you actually can create um new types so um remember that here we did this we've got these navigation equals to Auto right and then um we have these that it's applying to the root right one thing that gives you even more control is that you can define a type and this type can be different for each page right um so this type what's going to allow me to do is uh Target specific just um encapsulate the animations that we're doing because imagine that maybe one page you always want that page to come from the right and go back to the right no actually so you want one page to always come from the right and you always want another page to always come from the left or you want one page to not animate Etc right the way that you can do it is by passing types so this build transition I'm going to move it away from just to demonstrate this I'm going to move it away from the global custom code save and then I'm going to go to these pages and I'm going to added it to each one of these okay so I'm going to come here in the home and I'm going to do you probably can overwrite it actually but just for the sake of organizing things so you know it I think how this is called types so this types is going to be um let's do main like that okay and I'm going to grab that and I'm going to do it also for the about like that but then and on the list I want this to be a different type so I want this to be types uh list whatever okay can me get rid of that custom code and in here I also want this to be types list not main sorry list this means now that instead of having these animations targeting the whole route for all the pages I can specify okay I want this animation that it's moving one page from one side and and pushing the other one to the other side I want this to only apply when the page type it's main so if you come here let's see this we can wrap this I'm just GNA do it like that we can wrap this here one second and instead of doing for and backwards I want this to be main okay this is the the types that we defined and we can move this a bit like that and now this transition it's only going to apply to the main the pages that have the type main hopefully I think that I explain it correctly so if we try it again nice now you can see how we don't we no longer have these these moving from one side to another but if we go back to the homepage we should still see it we don't okay something it's missing here active view transition type oh oh we need to do nesting so yep we need to do nesting my bad one second custom code so these is nesting CSS so we need to add the end here like that so if we did it right let's try now so essentially we're mimicking this now okay nice so you can see how this is working for about and home nice but if we go to the lists now this is not doing the transition because we just encapsulated that moving from right to the left animation to the homepage and the about pages okay does that does this make sense let me know guys because I feel that I've didn't do a good job explaining it just let me know okay well I'm seeing a lot of people excited here in the comments nice love it okay so I've got 10 minutes let's talk about the custom JavaScript nice just for the sake of understanding this um one second let me try to find this example here so there are new events the page Swap and the page Ral events and these events allow us as I mentioned to customize the page before leaving the page and running the New page so if you go back to here remember that the browser take a screenshot of the old page and then take a screenshot of the new page and then it comes in okay these events the page Swap and the page repeal happen the pit swap is going to happen here for the old page and the the event will happen right before the browser takes a screenshot of the old page so if in this event I modify the page like for example I grab an element I modify an element to inject some view transition name or to do whatever then when the browser takes the screenshot it will take the screenshot with the modification that I did under this event okay and same happens here before the browser takes a screenshot what was it called page reval before the uh the browser takes a screenshot of the incoming page it will fire this page rebuild event and this page will give us access to the incoming page it's essentially the same as Bara JS actually I think that Barba nailed the way that it worked and we can modify the page before the browser makes a transition um so we can also inject the B transition names in here and here's a good example here's an example of maintaining the the last click because you know maybe you want to maintain State between the old page and the new page how can we do something with it let me try to think about maintaining the state now I know how to make my figma prototype become reality oh nice love it you're getting all ideas so um let's just see this example yeah here so this is the example that I was mentioning which we built hardcoding things with embeds but instead of using embeds like we did here we could potentially just use JavaScript okay and the way that they are doing it here is by doing this they first on the old page they listen for the page swap which remember that it's the event that happens before the browser takes the the old page screenshot and in here what they do is they uh see the target URL where this is going so it knows okay I know that we are going to to the uh BR or Adam arile page so now I know that I need to inject to the to the out um outgoing element and the incoming element a specific view transition name so they match like that so essentially it grabs the profile I think that it just does some uh yeah it uses IDs we don't see the HTML but probably one of these images has a an ID which is you know it's a bit redundant because if you're injecting IDs you can technically also inject the be transition name but still maybe you can come up with some other use cases but essentially it identifies the element that was clicked so it knows okay this image is the one that matches the the the incoming page so I'm going to update the bu transition name of both things so then you know the animation happens by the browser if that makes sense and the new page happens it does the same like that I don't know if it does anything else set temporary view transition names yeah and also with the with the JavaScript API you can wait until things happen so for example here um there's this V transition property that comes in the event so essentially when we're listening for this event this event will contain some information will contain information about the activation of what what was activated when navigating and then also it will come it will include information about the view transition that is happening and this view transition also has some promises like when the the transition happened Etc so we've got a lot of control actually to determine what we do with it yeah we can also inject the the we can see the type of the transition essentially everything that we defined here with custom code all of this can be also done with JavaScript so if you want to go because I only have four minutes so I'm not going to get in the weeds of this but you can go ahead and play around with the JavaScript API because I think it's cool arus imagine interactions 3.0 on pure CSS with PID Transitions and on scroll events than that is nice yeah I think that in the future we should see something like that from wlow I mean it's it's the the Natural Evolution right you just instead of using Cy libraries to do a job you just let the browser do it for you like anything that people browsers things can do for you is better than having to implement it yourself right so technically my PHA javascripts still has its memory uh yes until it's it's uploaded so if you want to maintain memory across Pages then you need to do use things like session storage here's an example so here this example they want to store the last click event and it's not specific to The Bu transitions it just uses session storage just keep in mind that the moment that the new pits comes uh your JavaScript code will know not know about it it will just it it's a new page it's essentially like navigating natively but there is some animation that it's happening but the scope the context the memory it's completely uploaded when the old page is is destroyed and the new page is completely fresh does that make sense BR the question is now when is this coming to Firefox and Safari let's see browser support Chrome Edge no Firefox no Safari let's check the source and there is no Source oh that's a Pity is it in can I use and Rule V transition it's only in Chrome for now let's see here not supported not supported uh do we have anything it's not even documented in Modzilla So This is highly This is highly experimental but the good thing is that if you don't use the JavaScript API remember that uh the JavaScript API relies on specific properties that the pro the browser is exposing to you and JavaScript can crash if something is not available in the browser but CSS on the other hand it will essentially just actually let's make the test do I have Firefox I don't but I have Safari uh gave can I share a my my full screen one second how can I do it hold on cuz I'm I'm on only sharing can you can you stop sharing my screen for a second I'm going to switch to share my entire screen like that you should see an infinite me now hey nice okay so if I go to Safari and use this um you it's it will simply just load the page as is so the nice thing is that yeah technically if you just use CSS technically it's Progressive enhancement yes because it will just not do anything it will just you know do the regular navigation if I go to the list it will just navigate without animating anything which is cool like nothing breaks you know but if we go back to Chrome in Chrome obviously it does work so guys just go ahead and have fun with it I think that it's you're good to go um unless you plan to use the JavaScript API if you plan to use a JavaScript API then I recommend that um this uh you add some checks so essentially that you you check for the browser API to exist before um executing any code because otherwise you're you're your running the chance of breaking things okay hello and behold client is not working yeah of course the client if you do if you build it this for a client it's always going going to test it with a different browser it's always going to say this do this doesn't work I don't think this will ever run because of event listener uh yes but I wouldn't I I wouldn't risk it I would still check every single property that you're trying to access just in case cuz maybe the browser another browser releases this but it releases it partially like maybe the event is there but the event object is not fully complete I don't know just test that it exists until this full support okay I think we're done I thought that it would a quick live stream but here right on the clock 4 p.m. my time nice okay well um just G to say thank you everyone for attending I think that this was a cool live stream something that you guys can have a lot of fun with it and please please please please please please please if you build cool with this just tag me on Twitter I want to see it I want to see the cool things that you're building okay just I appreciate that okay thank you everyone have a nice weekend goodbye all [Music]

Channel: Finsweet

Views: 1,761

Keywords: attributes, free products, fsattributes, lowcode, javascript, webflow

Id: mgvo7rIRIJk

Length: 61min 53sec (3713 seconds)

Published: Sat Jun 22 2024