Rachel begins a short section discussing different animation design patterns. Stateful transitions are great for highlighting a change in the task-flow location or indicating where you have been. The entrance animation of a modal dialog would be an example of a stateful transition. Supplemental animations indicate important details that shouldn’t be overlooked or different possibilities presented to the user.
(energetic Asian-inspired music) - [Rachel] We've talked about the how, now it's time to talk about the why. Why would you wanna use these animations? Not too many years ago, when we talked about animation, the idea was that it was cute and colorful, but it was mostly decorative. But now, these spaces matured a bit, we're looking at ways in which we can use animation to be more effective for users, and to use it discriminately in our designs. First, let's get this down, at its core, animation is merely the visual representation of change over time.
We have audio representations of the change over time, for instance, the Doppler effect, when the sound is moving closer to you it sounds higher than when it's moving farther away from you. This lets you understand rate of change in position using sound. Animation is a visual representation, similar way. We can animate things like position, and size, and opacity. Pretty much anything, even shape, just about any visual property is ours to command.
We can use these animations to indicate changes in direction, solidity and momentum, among other things. Now, we can take these different changes and we can combine them, to create the foremost common kinds of animation I have found in design to this day. There are other kinds, you may go, find your own vocabulary and your own use cases, but these are the forms that I see cropping up the most. First off, there is stateful transitions. Stateful transitions can guide users between states in a task flow, or between pages in an information space, page to page, filled field on a form.
I might say -- of course, my say, we have page transitions. So when you go from main page to the page on writing, or other page, notice that the background image, well, the background page, slides up in a way, and then it went slides down. This is actually not a site written in Reactor, anything like that, I'm using a library like smoothState.js to dynamically load each page using AJAX and combine that with CSS animations and transitions on classes that are added before and after the content is loaded.
So you don't have to use a whole new library to get these kinds of stateful transitions. This is a Jackal site, it is generated into flat HTML files. And there's nothing fancy, there are no routers, no controllers, nothing like that, it's just pages, and a little bit of Java script, and a lot of CSS love. Let's take a look at some state changes in the WAD. This is a site I like to go to a lot, notice, when you start searching, suddenly the whole page changes. And it's got this blue backdrop to let you know that you are searching now.
You're in a new context. You're a doing a new thing. You don't need to look at the rest of the stuff on the page, you just need to see search results, that's all you came there for. Now there should've been a transition, after the search was over, there should've been a transition with it sliding back up to show you what it found. Down here, when we click on one of these, we see very familiar transition, a module. Notice how the module faded in, it didn't just jump cut onto the screen. But notice it also jump cut off the screen. Transitioning things off is a lot harder than transitioning things in, for technical reasons.
For instance, when you remove a class, let's see, how do I put this, if you get playing with CSS animations but you realize that removing classes requires you to listen for the transition end, after you've added a remove class to it, you have to listen for the transition to end and then actually hide the information. So that's why, when you're visiting sites that haven't put a lot of thought into their animations, you'll notice that they might have transitions in done perfectly, but then jump cuts off.
So there'll be this beautiful dropdown, that will like foo (intonation glides down), fade down, but then, when you click off to the side, just disappears. It won't, you know, foo (intonation glides up) back up to where it came from. These are tricky things, we're not Q&A testing for them, we're not thinking about them at this time very much, but we need to be, we need to be thinking about moving things off the page as well as onto the page. So yes, transitions, everybody. So, stateful transitions, they are useful for indicating change in task flow location, showing users where they've been, and showing users where they are now.
So it's very good for helping them orient spatially as they move through a system. Up next, supplemental animations, now. Supplemental animation accentuates secondary information to the main state. Things like alerts, notifications, updates, those are examples of supplemental animations, or things that could be animated into appearance, it's also very easy to abuse. Let's have a look at some supplemental animations on my site. So, the side bar. I've been using the side bar so much, but this is a supplemental animation, 'cause the main task on this page is to check out the writing.
But if you don't want the sidebar there, you can get rid of it. It's not important to where the user is, and their whole life goals, or anything like that, so, nice to have. It takes some secondary information and it does something with it. It is a supplemental effect. Here's another example. As we scroll down, notice when we hover over each one of these headlines, a subtitle comes in and gives us some more information about, some supplemental information, the idea being, if you're hovering over a headline, you might wanna be clicking on it, if I give you some more information, maybe it will help you make up your mind.
That's a pretty fair assumption to make. So, they click it, there wasn't a transition, a stateful transition to this page, but bear with us. Oh, what happened down here? Look, at the bottom of the page, there's this blue bar. Right around the bottom, they're assuming, if you've gotten this far, you probably liked this article. Rather than putting some "share this now" links at the bottom of the article, we're just gonna quietly put this little navigation bar at the bottom of this share bar, just kind of move it up and be like "Hello! If you like it, might wanna share it." It's supplemental information.
It's not necessary to the main state, but it's nice to have. Not nice to have like nice pictures are nice to have, but nice to have for your user. Information they might find useful. So supplementally, animations, what are they useful for? They are great for indicating changes in information, showing people what is possible, like if you click on this thing, something will change, and showing people important details that shouldn't be overlooked.
For instance, your house is on fire. You should check that out. But I realize that you're just on this website shopping for things, so if you don't care, that's okay. But we thought you might like to know.
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