This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Static vs. Dynamic Animations" Lesson
>> 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: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.