This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Stateful Transitions & Supplemental Animations" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: We've talked about the how, now it's time to talk about the why. Why would you want to use these animations? And 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, as the space has matured a bit, and 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.
[00:00:29] First, let's get this down. At its core, animation is merely the visual representation of change over time. We have audio representations of to 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.
[00:00:50] This lets you understand rate of change in position using sound. Animation is a visual representation similar way. And we can animate things like position and size and opacity. Pretty much anything, even shape. Just about any visual property is ours to command. And we can use these animations to indicate changes in Direction, Solidity, and Momentum, among other things.
[00:01:17] Now, we can take these different changes and we can combine them to create the four most common kinds of animation I have found in in design to the state. There are other kinds you may go find your own vocabulary in your own use cases, but these are the four that I see cropping up most.
[00:01:36] First off, there is Stateful Transitions. And Stateful Transitions can guide users between states in the task flow or between pages and an information space, page to page, field to field on a form. On my site, of course my site, 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 the new one slides down.
[00:02:04] This is actually not a site written in Reactor or 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 well, 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 state for transitions.
[00:02:31] This is a chuckle site is generated into flat HTML files. There's nothing fancy, there are no routers, no controllers, nothing like that. It's just pages and a little bit of JavaScript and a lot of CSS love. Let's take a look at some state changes in the wild. This is a site I like to go to a lot.
[00:02:49] 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 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.
[00:03:04] That's all you came there for. Now, there should have been a transition after the search was over. There should have been a transition with it sliding back up show you what it found. Down here, when we click on one of these we see a very familiar transition, a modal.
[00:03:18] Notice how the modal 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?
[00:03:38] If you get playing with CSS animations, you'll realize that removing classes requires you to listen for the transition end after you've added a like 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.
[00:04:05] So there will be this beautiful drop down that will like foo fade down but then when you click off the site just disappears. It won't [SOUND] back up where to it came from. These are tricky things. We're not QA testing for them. We're not thinking about them at this time very much, but we need to be.
[00:04:21] 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.
[00:04:47] 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.
[00:05:08] So the sidebar, I've been using the sidebar so much. But this is a supplemental animation cuz the main task on this page is to check out the writing. But if you don't want the 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.
[00:05:30] It take some secondary information and it does something with it. It is a supplemental effect.
>> Rachel Nabors: 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 it, some supplemental information. The idea being, if you're hovering over headline you might wanna be clicking on it.
[00:05:54] If I give you some more information, maybe it will help you make up your mind. It'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. What happened down here? Look, at the bottom of the page there's this blue bar.
[00:06:07] Right around the bottom, they're assuming if you've gotten this far, you probably liked this 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, this share bar. Just kind of move it up and be like, hello if you like it might wanna share it.
[00:06:28] 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 or nice to have, but nice to have for your user, information they might find useful. So Supplemental 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.
[00:06:59] 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.