This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Causal Effects and Decorative Animations" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: Causal Effects. Now, causal animation is great for indicating when something has caused something else to happen. Consider loaders, spinners, those are great examples of causal effects. They indicate when the server has gotten up enough information to the page for it to be caused to load properly. Hover effects are also pretty familiar.
[00:00:25] As such, we have all at one point or another made a hover effect, I'm pretty sure. Here, we've got this button. When we hover over the button, notice it depresses and changes colors. That's pretty familiar. All that they indicate, in this case, all that this little animation, this transition is indicating is that you are the cause of this thing.
[00:00:46] You are causing this button to activate. Here's a slightly less familiar one. This is an interesting little accessibility feature. So notice that when you hover over the tab, it causes the menu to move up or down the direction that it's gonna go and if you click on it.
[00:01:04] This gives the user a little indication that, hi, you're interacting with this thing. If you do something to it, it's gonna change things. So let's do that again. Notice, hover, it bounces down a little. Click, it actually pulls down. Hover again, it slides up a little. You click it and it pulls up.
[00:01:26] That's a nice little thing to do for users, if you have time and energy to invest in thinking about their well-being. It lets their brains have a little prep the time to realize that if I do this, it's going to change, and what direction I can anticipate the change to come from.
[00:01:42] Now something from not me. Notice that big peacock. I'm gonna talk about that peacock next. Now notice hovering over the buttons causes different things to slide in and out. Indicates that you are the cause of these changes. When you hit Start, look, stateful transition. And here, when you're hovering over the different, like which one's the boy or which one's the girl?
[00:02:07] This is a very strong indicator that whichever one of these you click is going to be your selection. And look, boom, we got some supplemental animation on the screen. Now imagine how this would've been in the era before animations, like back in the 90s. This would've just been a series of forms with radio buttons and a click.
[00:02:24] And then the page would wipe and show you whether you were right or not. And then you'd move on to the next. And I guess that would be fun, but honestly this is so much nicer. Really fond of the Cornell Lab and their work. So lastly we have Decorative Animations.
[00:02:39] Decorative Animations are embellishment. They don't actually increase the information density on the page. This is important to think about. All the animations I've shown you so far have told you something about the content. They've shown you what direction it's going in. They've shown you that you were going to cause something to happen.
[00:02:56] They've brought to light other information that supplements the information that's there. It's all very information based, we're adding back feelings of physics. We're improving the information density on the page. But decorative animations, they don't actually contribute a whole lot. You can spot them because if you ask the person who provides them, maybe this person is you.
[00:03:14] If you ask yourself, why is this animation doing this thing? If you can't verbalize a reason for why, there's a good chance that it is a decorative animation, might not be worth the development hours or the battery life to display. So keep that in mind. So often animation, I should mention, will be more than one of these.
[00:03:35] You can have a stateful transition that is also decorative or a supplemental animation that is delightful and pretty to look at. But sometimes if that's all it's doing, if all it is is decoration, it's not worth doing. So here's my menu slowed down for detail. You can see that I animated the in-between states between more and nix this.
[00:03:58] I didn't have to do this. I could've just changed it from one to the other or faded it from one into the other. I didn't have to animate that. It's not actually making it more useful to the person to see that change. But at the same time, I had the extra hours and I thought it was a nice detail to add and it added a bit of polish to the interface.
[00:04:24]
>> Rachel Nabors: Now here's an example of a decorative animation used for a good reason. Who remembers this? Probably the first time you ever saw SVG animated in this way. When it came out it caused quite the stir. I was fortunate enough to meet the developers behind this, and I can tell you that they stumbled across this effect by accident.
[00:04:43] So what happened was around the time that the Xbox One was coming out, all the different venues, Polygon included, this is from Polygon. They were getting these consoles and they were getting pictures and they were getting specs, and they were running their reviews. So every console review site out there was posting pictures of the Xbox One and then a long form article about what was great, what was awesome, what wasn't so great, etc.
[00:05:09] How was Polygon gonna stand out and make an article that people would want to share more than all those other articles showing the exact same pictures of the exact same device, which looks the same everywhere? How were they gonna stand out? Well, I guess they could take really nice photos of it.
[00:05:23] Or maybe they could do a video of someone playing with it, but it's a console, it sits there. So what could they do to add interest to this thing that everyone else has? They went with its specs chart. They took that diagram of it and they animated it.
[00:05:39] And no one else had done this at this time, so this was very new and very different. And yes, it's decorative but they used this to showcase an otherwise boring piece of information. So keep in mind, sometimes doing things for a decorative reason. If you can verbalize why you should be doing that, it still can be justified.
[00:06:00] In this case, why would you do this with this illustration? Because it's a centerpiece. Because it makes it stand apart from every other image like it on the Internet. Because it's doing something different enough that it gives us an edge over our competition. A lot of people use this effect now in places where it doesn't matter.
[00:06:18] In places like I've seen itty bitty icons used to separate segments of a page on an interactive agency site. Nobody's going to be looking that closely at them. They're probably not even going to notice the change. Why are they done? So that the agency can be like, we know how to do that Polygon effect.
[00:06:36] That would not be cool in a banking site. That would not be cool in an app you expect people to use every day. That is just too decorative to be worth doing. But perhaps the agency was able to justify it by saying, we have to use this effect so people know we can do the Polygon effect.