Introduction

[00:00:00]
>> Hi, my name is David Khourshid, and I'm really excited to give this workshop on Frontend Masters about CSS animations. So I've been a web developer for over ten years. And I've been actually really passionate about CSS animations, frontend technologies, and cutting edge user interfaces. So one of my favorite things to do is actually take dribbles and recreate them in just pure CSS.

[00:00:26]
And that's something that I did a long time ago right when I was starting to learn JavaScript, but I was still pretty new to it, and I really wanted to get good at CSS. So here's an example of a CSS-only weather app concept that I did a few years ago.

[00:00:39]
You could see we have clouds moving, rain falling, snow falling as well. And so I basically took a dribble that I really liked, and there's a ton of animations that are just really, really interesting. And I challenged myself to see how I could do this with just CSS or CSS and only a sprinkling of JavaScript.

[00:01:05]
And so it's been a really fun hobby of mine. I tried to take it to the extreme, even doing things like creating a calendar app with only CSS. So I continued on this journey. And the more I learned about JavaScript and how it could be used and sprinkled onto these animations, the more creative potential that I saw for the types of animations that you could create.

[00:01:32]
So I also really got into state machines. And I do have some courses on Frontend Masters about X-state and state machines that I really encourage you to check out, because state machines are actually really related to animations as well. Take this choose or design your week example. We could select the days of the week, throw them away.

[00:01:53]
I could extend Sunday to as long as I want. And so doing this with just CSS, of course, is pretty much impossible. And even doing it with JavaScript is pretty hard, unless you understand the techniques of doing state-based animations and modeling your states and transitions. So that you could cleanly define the animations between states in a way that's actually easily maintainable and understandable.

[00:02:19]
So I will be going over that in this workshop, and we're gonna be going over a lot of things actually. One of the things we're gonna be going over is also layouts animations, which are actually pretty common, but they're not the easiest to implement. So I'm really excited to talk about techniques that we could use for doing that.

[00:02:39]
And at the end of the workshop, we're also going to be talking about reactive animations too. So this is a more advanced concept that leans more on JavaScript rather than CSS. But we are going to be learning principles of how we could use JavaScript and CSS together, so that they're not fighting with each other, but rather they're collaborating.

[00:03:00]
So that we could share these dynamic values between both realms, and create some really cool animations as a result. So for a while, I've been actually doing a live stream called the keyframers about every week or every other week with my friend, Steven Shaw, in Texas. And so on the keyframers, we make animations from dribbles, basically, that we just find really interesting, like I talked about.

[00:03:28]
And so we would take these animations. And in a one to two-hour stream, we would try to recreate them from scratch, and that's basically going to be the feel of this workshop. We're going to be just working on the animations with HTML, CSS, and just a little bit of JavaScript.

[00:03:47]
There's gonna be no frameworks in here, and we're actually also going to be using SCSS, which is a Sass preprocessor language that really looks and feels like CSS. If you don't know SCSS, then don't worry, because you could use normal CSS in SCSS, and it's going to work just fine.

[00:04:06]
But we'll explain some of the SCSS specific things in this workshop. So why are CSS animations important? It seems like something that we could just sprinkle on to websites. And it always seems like an afterthoughts too, just because CSS animations and animations in general aren't really often talked about when we're talking about designing websites or implementing functionality.

[00:04:35]
But they're actually really important. In general, animations bring user interfaces to life. And that's why I really enjoy when I see a website or a web app with some thoughtful, meaningful animations. And that's important, because animations need to be subtle. But they also need to be meaningful, in that they guide the user to doing something, or to indicating what can be done, or to telling the user, this is something that just happened.

[00:05:06]
And so this is important for the explainability aspect. When a user is using your application, they want to understand in an intuitive way just what is happening in the app or the website. And so there is a lot of examples of websites that really do this well. I really like Linear, both their landing pages.

[00:05:27]
And also the actual web app has some really nice subtle animations that really clue in onto this just disappeared, this just appeared, this came from here, this is going there. It really brings that extra layer polish to the user interface, and to the user experience as well. Stripe, of course, is another great example.

[00:05:49]
Of course, their menu is just beautiful to look at. And also they have nice subtle animations on things like buttons, where you could see the arrow is sort of moving to the right. And so this is the kind of thing that really makes you trust the software that you're using and also brings delight to the user, so that they're encouraged to use the websites and the applications a lot more.

[00:06:15]
And you could get really whimsical with this. So this is the Superlist website, where it's having a lot of fun with some reactive animations. And it also indicates what this app is about in terms of feel. So we could see that this app is just something like a notepad, where we have these pen marks, and these are even animated.

[00:06:39]
So if we scroll down, you could see just different things being highlighted. And yeah, so this is a great example of animation too, where it doesn't have to be sterile or super subtle. It really depends on what kind of design you wanna go for. But the main point is that I really want you to make designs or animations that are meaningful and delightful and also not too obtrusive.

[00:07:07]
And one of the biggest reasons I'm giving this workshop too is because animation and motion design, in general, should be part of the way that you think about designing and implementing user interfaces. And in fact, a lot of the techniques that we're gonna talk about apply to just better CSS techniques in general, even if you're not using animations.

[00:07:29]
So let's talk about what we're going to be working from. The repo is at github.com/davidkpiano/frontend-masters-CSS. So you could find it on my GitHub, and this is a basic HTML, CSS, and JavaScript app. Of course, we're using Sass as a preprocessor, but you could use CSS if you want to, it's going to work just the same.

[00:07:55]
To get started, you just run npm install in the root of this repo, and then npm run dev. So what this is going to do is it's going to start our app at localhost:3000, where there's a bunch of lessons in here, and also an in-flight example. So this is what it's going to look like.

[00:08:17]
We have all the lessons on the main page over here, and a ball over here, and this is going to be useful as a scratchpad. So in case you want to try any of the animation techniques that we talked about, go to index.html or style.scss on the root of this repo, and you could animate this ball.

[00:08:36]
And we're gonna be working from this scratch pad, index page a lot in this workshop. So we're going to be making a few examples. One of them is this signup form, where we're going to be adding some subtle animations to it, including state-based animations. And of course, you could get as whimsical as you want.

[00:08:57]
We're also going to be talking about layout animations too. So things such as when you don't have a defined position or size, and you need to read that from JavaScript and smoothly animate from one state to another. We're gonna be talking about techniques for doing that. We're also going to be talking, of course, about reactive animations, such as this one that uses the lerp technique to follow the mouse cursor around.

[00:09:24]
And then finally, we're going to be seeing how we could apply these kinds of animations to a real world app, or at least, a shell of one. So this uses state-based animations, transitions, and things like that, in order to give this app a nice, smooth feel. So I just want to remind you that this workshop, of course, is about CSS animations, which means that it is a creative workshop.

[00:09:51]
There's no right or wrong answers. And the main points in this workshop that I want you to take away is all the different animation techniques and principles. Including how to do transitions, animations, how to use a JavaScript to communicate with CSS in order to create any animation you would like.

[00:10:12]
And the exercises we're going to be doing in this workshop, like I said, there's no wrong answers. So I really encourage you to be creative, and add whatever kinds of animations that you would like in there.