Thinking on ways to solve a MORPHING BUTTON

Key Takeaways

welcome to another episode of kui challenges where I build interfaces my way then I challenge you to do it your way because with our creative minds combined we will find multiple ways to solve these interfaces and expand the diversity of our skills and in today's GUI challenge we're building a morphing button one of those kinds of buttons where like you submit a payment or you say hey start crunching this image or do this AI work or whatever it is and you hit a button it goes into another state it transitions to another state and then eventually goes back to the state that it was in in the beginning so we have a multi-state button that needs to kind of morph and adapt to these different amount of contents that it has it's a perfect use case for view Transitions and so that's what I used today can't wait to show you let's dig into the code [Music] background about view transitions let's just assume you've never heard about them at all this is a great starting place this is an article by Jake Archibald covers all of the different things that you can do with this API called view Transitions and it was previously called shared element transitions now what this allows you to do is tell the browser that you're about to change something on the page so why don't you look at the state of all the elements and then I'm going to change the page and when my function is done go ahead and uh seamlessly transition from where that element was or many elements were to where these new elements are and I've showed a couple in the GUI Snippets that how you can use this to do things like animate display none you can animate text replace it has so many super powers and so today I'm using it to apply some Styles and transitions to a button so here we have our button that doesn't have the view transition work applied also looks like it's well it's missing a whole bunch of styles we'll get into that soon but I wanted to give you a little bit of background on view transitions give you a reference to a nice resource but let's dive into how I achieved this in this button today so the first thing that I'm just going to show you is that I've set up a SVG element here with style display none and I've put a symbol inside that has all the different spinner path information and I give it in a nice name and that becomes really handy because then I can use that with this use tag and I can just say hey use icon dot spinner and so in my JavaScript where I'm kind of injecting new contents when you hit this button you can see that that spinner gets set up here and that's where it's coming from so I like the used technique for SVG I think it makes it kind of nice but it's up to you so anyway that was where the icon is coming from and stuff like that and then just here I have a lonely demo I have a lonely button with an idea of demo and it starts out as do some hard work so that's the HTML that's sort of supporting this I've got some Styles in here so first off I'm loading in open props in the normal eyes that's why I have like a dark background here right now so that's you automatically get the light in the dark theme but let's import the buttons and get a nice style button so now we get a nice light and dark style button here kind of cool it has a nice little clicky effect and we have some support styles that just put this demo in the center probably even get rid of the Gap don't need the Gap there's not more than one element in this demo so we'll just Crush that and the next thing we're going to add is this morphing button concept well let's do that in a minute let's look at what the JavaScript is doing I have three states which is Idle State we can see it's right here and that do some uh hard work phase uh in the next one it moves into sending which has the spinner and the working text and here we'll just click that button and see it there it is working and then we have the done state which you know looks really happy and it probably could add another spinning successful check mark uh animation right here if you wanted to I just need another icon no big deal so what happens though is when we click the button we're going to set the state to sending which is going to add the spinner in the working State we set a timeout so this is just like a really cheap State machine we set a timeout for 4 000 seconds or four thousand milliseconds which is going to be four seconds anyway it sets a new state and then eventually after six seconds sets the state back to idle so this entire animation takes six seconds it has four seconds of working two seconds of done and then it goes back to its regular State now you can kind of already see that there's a Crossfade Happening Here you see how it like it crossfades between the different states that is because we're using the API for view transitions down here and we're also doing it as an additive bonus so while this demo currently only works in Chrome it will eventually work in any browser that supports view transitions but what's nice is we're only calling this view transition function and doing this morphing if the browser can do it otherwise it's just going to change States immediately and it's no big deal but what I want to come back to is that by using this API at all you get crossfades between your animations which or between your States and I think that's really nice as a default so that's why we're getting crossfades is I'm calling start view transition and so then the other way that this works is just so that we break it down sort of again conceptually at a high level view transitions in this single page application model where I'm using JavaScript to invoke them you need to tell the browser I'm about to do some work and that way it can look at the current state of your button in this case and then after you do some work like in this case set the inner HTML to something new your function will complete and the browser will take another screenshot of that element and then allow you to morph between the two so um that is the extent of using the API and the rest of it kind of comes down to some CSS so let's dig into the CSS that kind of makes that happen and we'll undo our uh comment here that's commenting out the morphing button Styles go look at what's happening inside of here and um even take some out let's take out this and let's see what happens when we just give it a view transition name of by button so again we've got our button we have our Styles we have our JavaScript that's going to call that function and you can see it morphing between our different states now there's going to be some awkward morphing happening look at how it's sort of like ghosted out the one of the past and it also was kind of large in a lot of ways or it's oversized um and that's because the browser is really optimized for maintaining the aspect ratio of something in these Transitions and that's essentially what these Styles here do they say I see you browser trying to keep the aspect ratio on this buy button element but I don't want that I'm kind of opting into a squish effect and so here let me save these Styles and you can see watch as the animation happens this time and you can see some squishing happening in fact let's just open up the dev tools go down to animations and slow the animation down and also move this under yeah here we go so we've got a 10 animation going we're going to really see the squishing happening there nice did you see that we'll go back to kind of fast and another one is it squishes so normally it's not good to squish your text um I would almost always advise against that but in this particular case where we have this morphing button it's kind of super duper convenient for us and the effect happens so fast um I don't think there's a whole lot of you know visual loss happening there so here let's just see this again so it goes so I'm squishing and that's because again we're forcing the height and the width of the old image and the new image to be combined together to be squished into the space of the element as it is naturally in the Dom so when we reference view transition old by button we're looking at the image of the old button and when we reference view transition new by button we're referencing the new um image that's coming in so the browser when it does these view transitions it's working with bitmaps it's working with like textured images and that's important to note because that's how we achieved our effect is by kind of squishing it into space and now we get a nice little nothing button right kind of cool and we can add as many new States in here as we want like let's go from sending to um registering yes because that's probably going to happen here registering registering and then in here we'll say you're going to go from done to registering well here I think we should actually do registering first at two okay so now we should have a whole new state coming in here let's see working registering and we're done let's even make registering have a whole bunch of text registering your new thingy all right more working yes registering your new thingy and it's done so what's especially neat here is the browser uses actual layout of the new state and then the actual layout of the Old State and it's all contextual so if we were in a right to left language if we had you know translation happening here all of that stuff would still apply just as much as it would have before because the browser is very naive here and we've given very light amount of instructions about what to do so that is how I made a morphing button I really just gave it a name and this is important with view transitions if you want to customize the way that the transition is happening Remember by default it's just a Crossfade I give it a name and then I can reference the old ends the new so there's other demos where I've shared where I make the old one scale out and Fade Out and the new one gets to slide in there's all sorts of opportunity to handle and customize how the old one goes out and the new one comes in it's really really fun really powerful API and I love that this just sort of Simply upgrades to a morphed animation whereas by default it'll just happen instantly and I don't think there's a whole lot of experience lost there the content is still there the screen readers still report all the changes that are happening to this button which is really nice the only thing we're adding is a visual affordance of some morphing I hope you liked this GUI Challenge and I'll see on the next one y'all enjoy view transitions [Music]