Static animations are the easiest to create. An element animates from one state to another. Both states are predetermined and predictable. Dynamic animations, however, are typically triggered by some event or user interaction. The resulting animation could have a different outcome each time it runs. Rachel demonstrates these differences and explains how the combination of static and dynamic animations can lead to stateful animations.
- 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 the can help ease cognitive load. Now we're going to talk a little bit about how we implement animations, on the code side, programmatically. I want to clarify some different ways of approaching animation. So first of all, there's a static way. This is where it in animation it runs from start to finish.
It has no branching logic. Just predefined sequences. This is an example of a thing I made where the only interaction people have is clicking that tassel. 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. Now there's stateful. Stateful animations are when you take a default state and have an event happen. Like a hover or a page transition, something like that. And then it moves to a different state. It's Boolean input. Either it's happening or it's not happening. We see these a lot on our devices. States become much more pronounced in app environments. They really help us bounce between tasks. This is Evernote. One version of Evernote.
Notice that there's a difference. There are three things you can do with Evernote. You can either search for something or you could be writing something. Notice when you edit, that whole thing slides up for you. We're in a writing state. 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. There are no predefined states that you can use. It determines it's 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.
Note: This course was created by Frontend Masters. It was originally released on 09/15/2016. We're pleased to host this training in our library.
- CSS transitions and animations
- Using animation in product design
- Creating a sprite animation with CSS
- Stateful transitions and supplemental animations
- Using developer tools to manipulate animations
- Jump cuts and in-betweening
- Static vs. dynamic animations
- Designing performant animations