Animating States Solution

[00:00:00]
>> All right, so, let's add some state-based animations in here. So we have three states to find. We have subscribe, success, and error. And these data state attributes are on the UI form itself. So that's important to keep in mind. Like before, we had that slide in animation or slide up, as I called it.

[00:00:23]
So, we could say for subscribe in this subscribe state, that's our initial state. So that's where we wants to actually have it, slide up. So slide up, let's do that over one second, and let's have the fill mode be both. So now, only when we're in the subscribe state, will it actually show that animation.

[00:00:48]
So now let's actually try just doing the different states. So we have a success state, an error state. Let me just see something real quick. Okay, yeah, so we have subscribed success, error. So, for the success dates, we have this color, CSS custom property, or CSS variable, that we're passing down to all of the elements that are inside of the UI form.

[00:01:18]
So we could change that color. So something like green over here, maybe make it a bit better. All right, and so, the way that we test that without having to hook up JavaScript or interact with it is, we could just change the state right over here. So I'm gonna change it to success, and then we could see that our data states are working.

[00:01:42]
So, remember this is just like any other CSS selector. But the difference is, we can manipulate this pretty easily with JavaScript. So, going back here, let's change the Error color to some reddish color. That's orange. We got something like that. And we also want this to be where we add the Shake Animation.

[00:02:12]
So, going here, remember we have these keyframes shake. So we could add that to the error state, and say, animation shake, and we'll do this for a second. And we want both ends of the animation to stick. So, Now, when we change the state from subscribe to error, it's gonna shake.

[00:02:40]
And now we have our animation. So we could also go to success, and we see that we have a success. We don't have an animation here, but we could easily add one. So, actually just for fun, we could just have it jump up and join, I don't know.

[00:03:01]
So, keyframes, let's just call this a good job. And so we're gonna go from transform none. At the deeper sense, we're gonna go to transform, translatey, negative 100%, to,, we're gonna go to transform, translatey. This is going to be zero. But, actually right before that, I wanted to sort of just have a squishing effect.

[00:03:37]
So we could also scaley 0.8, this should look interesting. But let's see what happens. So now when we go back up here to success, we're gonna have animation, good job, one second, and both. All right, so, here's our Subscribe animation. So when we go to success, it doesn't do anything.

[00:04:04]
Let's see what happened. We have animation. Good job, okay? So, one thing we could do is just determine that the animation is actually being applied to the form. And it looks like it's not. So, you know what, I'm in the wrong style file. So Let's go over here.

[00:04:32]
And so now when we do success, [LAUGH] it sort of does is pretty silly animation. So, of course we could change the speed of that, and everything like that. All right, so, the next part of this is, we actually wants to hook this up so that when we click the button, we're going between these dates.

[00:05:00]
So I'm going to grab that button over here. So, all right, actually yeah, so we have this set state subscribe, and this is just some JavaScript that's being put directly into Onclick. So this is really old school HTML. But we're gonna define that function over here. So function setState.

[00:05:22]
And so now, we are going to set the data dot state of the form elements to the state that we give it. So, formL.dataset.state equals state. So you can see here that we have on click equals set state subscribing and so just to show this sort of pretending to work We're going to set a timeout if the state is subscribing.

[00:05:55]
So if state is subscribing, then we're gonna set time out. And after a second or so, we're going to set state to Success. And let's just do it after a second. So, when we click here, after one second, it goes to Success. It does our little Success animation, or we can make it go to Error.

[00:06:26]
After one second, it goes to Error. And then we could click it again, and it's still going to error. One thing that I like to do is, do sort of a math.random. So if it's less than 0.8, then we'll go to success. Else, we'll go to error. All right, so, we click this, sometimes it goes to Error, sometimes it goes to Success.

[00:06:59]
And yeah, so, one last parts which is sort of a bonus, but something that's really useful to do, you see that we have all of these these pens over here for subscribe, subscribing, success, and error. So, let's say that we want to conditionally show those based on what the state is.

[00:07:23]
What I'd like to do, and of course you could do something different, especially if you're using a framework, then you could do this within JavaScript. But I like adding a data-show attribute which says, show this element only if we are in that state. So this is going to be for subscribe.

[00:07:45]
This is for subscribing, this is for success, and this is for error. Now what we could do, is whenever we change the state, we could query for all of those elements. So const shown Els equals document dot query selector all. And we could look for those data state equals whatever that state is.

[00:08:14]
So by doing that, we could iterate over those forEach el. And we could also use data set to toggle whether they're active or not. So, el dot data set, dot active, equals true. Now, we also have to make sure that we reset this every time we change the state.

[00:08:37]
And so we'll do this up here. Active Els equals all of the ones that are data active. And so active Els dot forEach, El dot data set dot active, is false. So we're removing the active data attribute, and we're setting the ones that are supposed to be shown to true.

[00:09:04]
Now in the styling, that show. We have a style over here that says, if it has a data show attribute, but it's not active, so we don't have that data active attribute on it, then don't display it. And so the result of that Is this, so we do have to set an initial state over here.

[00:09:27]
So, I'm just going to set states. And our first state is going to be Subscribe. So now hopefully, should be able to see it. So just double checking, we have data state equal Subscribe, and data show equal Subscribe. So, [COUGH] Let's just make sure that we have everything, showing Els.

[00:10:00]
There we go, cool. So now we have the Subscribe, and then it shows subscribing. So, we just have to One small thing over here. This is a gotcha that I just ran into and, hopefully, none of you run into now. But, to remove a data attribute, you can't just set it to false.

[00:10:27]
All you have to do, because that's actually gonna convert it to the string false, which is not what you want. So, what you really want to do, is delete it. And so what that's gonna do, is it's going to just remove that attribute, so that you don't run into it.

[00:10:45]
And as a result, now you have your working animations.