Course Overview

[00:00:00]
>> I want to get into what this workshop is actually going to be about. So of course we are going to be talking about animation principles throughout the workshop, what you should animate, what you shouldn't and just some nice subtle ideas for how to add animation into your existing websites and applications.

[00:00:19]
But I also really want to emphasize that this is a creative workshop, so this workshop is going to be split into a few sections starting with the fundamentals where we're gonna be talking about CSS and also just different animation principles. Then we're gonna be going into transitions, CSS transitions and then we're gonna be going into the key frame animations and then choreographing between multiple things animating.

[00:00:45]
And then we're gonna be talking about states and state transitions and even state machines and how those relate to animations and can help you think better about how you do different animations on your applications. We're also gonna be talking about layout animations, which is a more advanced topic, but it's very, very useful.

[00:01:08]
And then we're going to be talking about reactive animations. So this is actually going from least amount of JavaScript and least efforts to most amount of JavaScript and most effort. With that, this is a creative workshop. So every lesson that we do, there's going to be a couple of opportunities for you to practice each of these techniques.

[00:01:28]
One of them is going to be in a simple application where you are showing an email input and a subscribe button and you have to just intimate that simple form. And another one, we're actually going to be building a sample in flight app for a fictional front end airlines.

[00:01:46]
And in that app, there's a lot of opportunities for you to animate. So the goal of each of these sections in lessons is for you to actually apply these techniques in whichever way that you want. So there's no right or wrong answers. It's just about, can I use this technique to achieve whatever effect that I want?

[00:02:06]
And so my main goal in this workshop is to provide you all the techniques for you to bring your user interfaces to life. So that you can know, okay, if I want to add a transition here or add an animation there, I know exactly how to do it using CSS.

[00:02:22]
Or even if I want to add an interactive or a reactive animation, I could do so in JavaScript before adding any libraries. So that's the thing too. We're not going to be using any libraries in this workshop. We're going to be using plain JavaScript. In fact, we're gonna be putting it in the script tag in our index, so our index.html page.

[00:02:42]
So we're going really, really old school here, but the reason for that is because it should not matter which framework you're using, which libraries you're using, the same principles are going to apply. And you could use the techniques that you learned in this workshop in pretty much any framework or even no framework at all.

[00:03:00]
For CSS, we are actually in this workshop going to be using a pre-processor called SAS, and we're going to be using the SCSS variance. Now, if you don't know SAS, then don't worry. The SCSS variance is completely compatible with the CSS. So if you don't know some of the helpful things that SCSS provides, just write normal CSS and it's going to work exactly the same.

[00:03:27]
So, no worries about that. And if we have time at the end of the workshop, we're actually going to be doing what I've done with the key framers that we'd been doing for a few years, which I'm going to be taking a dribble. And we could work on this together, but we're going to be creating it and creating that animation completely from scratch.

[00:03:51]
So much from scratch that I had not even prepared it, I wrote zero HTML, zero CSS, zero JavaScript. And we're just going to try to do it at the end. So it's gonna be a nice fun exercise. And we'll see if we could do it. And so this is going to give you an idea of what it's like to take an animation from scratch and actually implementing it with all of the bumps in the road and all of the struggles and of course the reward of actually getting the animation working at the end.

[00:04:24]
So again, the workshop is at github.com/davidkpiano/frontend-masters-css. And once you get this installed, all you have to do is run npm run dev or yarn dev. And so, that's going to spin up local host at port 3000 and that's where you could see this. And so this is the index page.

[00:04:55]
In the index page, actually there's not much of anything. There's just basic HTML, and there's also this little ball here that I made. There's some styling for this page, but the reason I'm pointing this page out to you is because I actually want you to use this page as your scratchpad.

[00:05:17]
So if you want to try anything out with CSS animations or a little bit of JavaScript, or even something with this ball and getting it to animate, this is the page that we're going to be using for that.