In-Flight Application Animations

[00:00:00]
>> Okay great, so the very last thing that I wanted to talk about was actually an example app that we have. So I wanted to show this to demonstrate, what would it actually look like if we used these animations in a real app? So this is sort of the fake/real app that I made by sitting on way too many delta flights but I didn't use delta in the name.

[00:00:26]
We have a new airline called Frontend Airlines which seems fun but also dangerous, I would not be in a plane written by Frontend developers. But yeah, so the idea here is that we have buttons that do things, it changes the data state. So we have an opportunity to do these state based animations over here already.

[00:00:48]
Just looking over here, we could have this come in. When we do movies, we could have each of these movies individually show up. So that's also a possibility, same thing with the music over here, just gonna move this over here. And then this. So this is an overlay that happens when you click about.

[00:01:09]
And there's a few of these on the actual Inflight Delta app if you've played around with it, but this is an example of a really jarring animation. So you have, or lack of animation really. You click this and the entire screen changes so it's not obvious where this came from, and it's just not a very good user experience.

[00:01:34]
So if you want to play around with this, this is in examples and it's in form. And so we have a few styles over here, actually we have a lot of styles and we do have some animations and transitions as well. So let's start with the transitions over here.

[00:01:55]
If we could find them, wait, so I'm in the wrong file, there we go. Okay, so we have some transitions. Let's see, this is one for the movies. So now the transition is going to be on the opacity so that when we hover over it, we're changing the opacity from 0 to 1.

[00:02:18]
So, this is the very first lesson that we talked about, where when we go the movies. Let's actually, okay, so, we probably have to add our transition variables and things like that. But yeah, let's go ahead and I'm actually going to add all of these in just to show you what it looks like to actually have some animation in this app.

[00:02:42]
So I basically come to add a bunch of things. And this brings me to another point which I'm gonna talk about very soon, don't worry. So animation, okay, so right now we're just adding back a lot of animation over here. And so we're going to see just the effect of these animations and hopefully, give you some inspiration for how you could use animations in your actual apps.

[00:03:12]
So let's see if I forgot anything. No, I think we're good, okay. So [COUGH] here's our Frontend Airlines app, now we have a nicer intro, so we could click get started, that slides down, this slides up. And so you could see there's actually an opportunity to do some choreography.

[00:03:37]
Where instead of this sliding down and the other ones sliding up, we could wait for this to finish sliding down before the other one slides up so that's a possibility. Now when we go to movies, we could see that each one of these is sort of staggered. And so we're doing the same technique that we talked about before where we are adding that that CSS variable to each one of the movies for each of their indexes.

[00:04:07]
And so because we're doing that, we could stagger all of them, just without requiring an extra animation library. So same thing with music, we have it over here, and then the overlay that I showed you, we have over there now. This animation is pretty fast so you could definitely adjust that to whatever you feel.