State Machine Q&A

[00:00:00]
>> So, what does this have to do with animations? Well, animations can be in various states, and so you want to define how these states transition between each other. Rive does a really good job at this, here, let's just show you [INAUDIBLE]. Rive is an animation editor, it doesn't let you build web animations, or at least not easily, at least not the way that we're doing it.

[00:00:29]
But, it shows you how an animation can be in various states. So, try and find a good example here, okay. So, this is a great example where, right now we have this arrow where it's in the idle state and then it's blending, blending and then eventually it's complete.

[00:00:51]
So you can see, each one of these are different animations. And so when you get into more complex animations, that's when defining your animations as a state machine really, really help. So, I want to show you some other examples of some CSS animations which states see, here we go.

[00:01:16]
This is a password model in which we have a different animation for each state. We are using data states in order to do this, and so we have again, a different animation. If we type some password, and click Submit, now we're in a different state where we're playing this animation, and after a while it goes to an error state where it shows a different animation.

[00:01:39]
So, I'll show you that error animation again. So it's validating, and then it shows that shake animation which hopefully by now, you know how to make. So, we could also enter the correct password and it will show a success animation. So that's just one of many examples of using different states just for animation.

[00:02:09]
All right, so any questions on how we use data attributes, data states, data sets, and setting that state? Any questions on how we could use that with animation?
>> For React, aren't CSS variables and data attributes a little complicated?
>> So the answer actually is no, they are not really that complicated.

[00:02:35]
You could definitely use both of them. And so just to explain, hopefully I could point-
>> So the benefit of React is very declarative?
>> Right, so one way to think about it is that there's the JavaScript world in which JavaScript variables they live in there. JavaScript variables could read other JavaScript variables et cetera, functions can read those variables.

[00:03:00]
And then there's the CSS world where you can read CSS variables and all the stuffs, properties and things like that. And of course in JavaScript, you could also write to the CSS variables. But one thing that's hard to do, is to actually communicate that this elements should be in this, you want JavaScript to provide that value over to CSS land.

[00:03:27]
Now, you could do that by adding class names and things like that. However, the problem with that, is that you here and let me just fix this. The problem with that is that with class names, you can't enforce that you have only one value. And so, for example, let me just show this here.

[00:03:53]
Let's say that instead of data state loading and data state success, we had this as a loading class, so is loading, and is success. Okay, so the problem here is that sure we have classes and this might feel like the normal way of doing things. But now in our app, if we specify the classes.

[00:04:29]
One second, let's actually get rid of these just for a minute. And so, let's just make sure that we have our class set up. All right, so we have the is loading class, and should the background be white? Sorry, forgot to put the hand. Okay, so here's our is loading class, so if we set this to is loading, then sure we had the loading state.

[00:04:59]
If we set it to is success, we have the success state. But you could also do this, we could say is success, is loading, and you would think that the second one would win, but it's actually the first one that wins. Because it's declared later, but of course that changes depending on if you move this up here, then it's a completely different story.

[00:05:24]
So you just run into cases where it's definitely possible for you to have impossible states. And using data state is no more complicated than using class, or in React, it would be class name. So they actually work really well together. And again, you don't have to say data set dot state in React, you could just put data state equals curly braces, whatever you want inside of that attribute.

[00:05:53]
And so yeah, the question was about like that versus injecting class names. Again, you cannot enforce that you only have one class name. Whereas with the data state, the way that we're selecting it over here, is such that we're only looking for it to be exactly that value.

[00:06:13]
So, yeah. All right, any other questions? Back to your the state machine was your reason for the capitalization on click or is that just a naming convention you like to use?
>> So this is just a convention to make it really clear that this is an event. So that when you're scanning in the machine, you could be like, that's an event, yeah.

[00:06:41]
And just to visualize this, I want to show you something else too. This is what that state machine looks like. So we're on the start state, and we might be in some loading state, and then some success state. So we could just say, when we click we go to success, and when we click again, we go to loading.

[00:07:10]
And, this is also a click over here. So you could see that when the user clicks, we're gonna go from the start state to the loading state, and then to success, then back to loading success, loading, et cetera. So, yeah.
>> So, are those the only [INAUDIBLE] the states that are in CSS loading and start [CROSSTALK]?

[00:07:30]
>> No, so these are just custom states that I defined.
>> So, you defined it? Okay.
>> Yeah, and this would actually be a good point for me to show the inflight example that I did. Because this inflight example, right now there are no animations, but you see over here I have a data state of welcome.

[00:07:52]
And so each of the screens are shown depending on what that data state is. So if I click Get Started, that's going to change the state. And so now we're in the home state, so we have a completely different view. And so now from the home state, we could go to movies and to music.

[00:08:12]
And you can just show this pop up over here, or overlay, whatever you want to call it. So data states are really useful because now you could actually define states, which you could use in CSS to style the app and to add animations based on those different states.