This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Static vs. Dynamic Animations" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: We have talked about UX, we have talked about how we can use animations in designs and why they might help users with certain things in certain places, how they can help ease cognitive load. Now, we're gonna talk a little bit about how we implement animations on the code side, programmatically.
[00:00:22] I want to clarify some different ways of approaching animation. Let's see. So, first of all, there is the static way, and this is where an animation, it runs from start to finish, it has no branching logic. It's just free-defined sequences. This is an example of a thing I made where the only interaction people have is clicking that tassel.
[00:00:46] The rest of this is all CSS animations. It's running from start to end. It's really not interpreting anything from us. It's not taking any extra information. It's just, it's static. No logic. It's very much just doing what we tell it. It's very declarative, for those people familiar with programming terms.
[00:01:08] And there's stateful. Stateful animations are when you take a default state, you have an event happen, like a hover or, a page transition, something like that, and then it moves to a different state. It's a boolean input. Either it's happening or it's not happening. I always see these a lot, on our devices.
[00:01:28] So it's become much more pronounced in app environments. They really help us mounts between tasks. This is Evernote, one version of Evernote. Notice that there is a difference. There are three things you can do with Evernote. You can either search for something, or you can be writing something.
[00:01:43] Notice when you edit, that whole thing slides up for you. We're in a writing state,
>> Rachel Nabors: Or, we could scoot back. And then there are dynamic animations and these are the hardest for us to do, we can't do these with CSS, they're too much. This is where you take rules and you take variables, and the computer generates the new state based on the inputs and how they impact the rules that you've given it.
[00:02:18] There are no predefined states that you can use, it determines its own outcomes. This is a really big deal for things like dashboards. This is a demo from a friend of mine, Alex Graul at CrowdStrike, he gave me permission to use this to show you all. Now, you can't really imagine this kind of a dashboard as a page with a bunch of database line entries in it.
[00:02:41] You see, all the green dots mean that the servers are secure but the orange ones indicate that there might be a threat. So you would want to go investigate those. And you can see that the orange ones just really pop right out. And you can go investigate them, immediately.
[00:02:55] This, no. You would need JavaScript to do this. CSS is very much too declarative. However, you should keep in mind that stateful animations exist, or dynamic and declarative overlap. So you've got your static, you've got your dynamic animations, but you can combine them. Take a little bit of user input, determine what state they should go to, and already have written out how you want that state to look.
[00:03:20] And CSS is really good for that if you mix in a little bit of JavaScript. Let's talk a little bit about different ways of triggering state change. So, it's hard for a meaningful animation to exist without JavaScript, we'd be limited to CSS's hover pseudo-class, right? That's not so great.
[00:03:39] Or maybe the check-box hack which you shouldn't be using for many many reasons. There are ways. There is loading. You can use JavaScript to sense when a browser event has fired to indicate that the page has finished loading. A scrolling, that happens all the time, it's actually one of the browser's few built-in animations that it does natively and does very well.
[00:04:00] Human events like hovering, we mentioned that. Also clicking or tapping, gestures. Timed events, for instance, when things time out, or if you want to do things with choreography.