Speaker - Val Head

Interface animations are most effective when they work in concert as part of the bigger picture. Designing and choreographing your web animation efforts from the top down leads to more effective animations that integrate into your design system. And, defining a motion language for your brand can help your team to develop a shared vision from which to work.

In this session, Val will cover guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use. All the things you need to make web animation work for you and your team.

Transcription coming soon

I’m going to be talking a lot about animation, because that’s a thing that I do. I have kind of like sometimes unpopular opinion about animation on the web. Like I think we should use it more. I think we ignore it kind of to a fault and a lot of it has to do with like all of our history with like Flash and stuff and ooh, evil and bad, don’t do anything with it, stay away from it ahhhhhh! That’s a real conversation I had just now. So I really think we should use it more and embrace it and try it out and get more done with it, but a lot of people think that’s a terrible idea. Maybe not a lot, but I’ve run into a few, especially on Twitter. Great place to meet people who are angry. It is, though.

And I think a lot of people who think that’s a bad idea, they assume that if we have more animation on the web we will end up with an entire internet of this, and this is a video of a website that I am scrolling in an attempt to read some words. Still scrolling. Still going, not done yet. And then when I’m done I get to see it all again in reverse. Yeah! Who wants an internet full of this? OK, you guys should leave.

Am I allowed to kick people out from the stage because I’d like to try? But it could mean this, right? If this is what we make with it, this could be what the entire internet is. But it could also — like more animation could also seeing more things like stripe checkout, which is a ton of animation, if you go through this whole process whether you’re updating or upping your triple pro-account or whatever else, there is animation associated with every single thing you do in this entire checkout flow, and there’s a ton of animation.

The biggest difference between what that go chat site thingy was, and what you see in checkout isn’t the number of animations. The biggest difference is the fact that like Stripe has paid attention to how these are designed, they’ve paid attention to why the animations are there. They have like a reason for them to all to be there and most of the reasons have to do with like you or me, the people using the checkout thing, not just them doing, did you see you could flip stuff with CSS oh, my God, this is the best. But you know, Stripe had a very, very different approach. They’ve chosen places where animation could be useful for you as the person using it and then they’ve taken one extra step and designed this animation so it fits with the rest of their design, they’ve kind of hit that sort of balance of invisible design with animation, invisible animation in a sense.

So personally when I say we should use more animation on the web, I’m going more for this side of it. This purposeful, well designed, really well done stuff, and the way we get to that kind of animation is combining those senses of purpose and style. It’s kind of the two halves of the puzzle, right, if you have an animation that’s there for a really good reason and it’s going to be really helpful but it’s super-ugly and horrible and runs really slow and looks awful, it’s going to defeat its own purpose, right? It’s not going to work, so you need that balance of a reason for it being there and style, making it look good. I think the style part is often the hardest part for us, because if you were to go make a super awesome type layout. One of the things you might go is look for some general guidelines for typography. What do people do? What kind of spacing is a good idea nor letters? Should I put it in all caps, all the time?

You’ll read up on that and you get a lot of that while you’re going through design school and stuff, too, so we’ve kind of got this stuff to fall back on with type and if we made something that’s really beautiful, we’re like, yeah, we followed all the rules, maybe broke a few rules there, but most of the time followed those guidelines and if we made something really ugly with type, chances are we were ignoring some of those rules. But for animation we don’t really have those an guidelines to go to. We don’t have a million thousand designing with animation books, like we have a million type books, there’s that kind of gap in our knowledge.

[5:00]

But really drive that style, and how to make it look good and feel good, something that you want to interact with. Those designs all come from basically the traditions like the long tradition of animation and motion graphics that have come before us, crazy things, I hope I’m not ruining anyone’s view of web design, we are not the first people to animate stuff. Yeah, sorry. Well, you might be shocked by other facts in this preparation, as well. But at least we can look for these rules or these guidelines are the classic principles of animation, and there’s this little company, called Disney, you might have heard of them. Perhaps they wrote this book. Well, maybe. They wrote this book. Yeah, they wrote this book calmed the illusions of life where they basically laid out how to make animation look like it’s real.

When Disney came along in the whole business of animation back in like the ’30s or something, this was like forever and a day ago, most of animation that happened in that time, because it was nick technically possible. So just making something move was amazing and then Disney and his animators came along and they were like, well, what if he we tried to make these things on screen look real and that’s how they changed the entire industry and everyone was like, what? What are you doing? Oh, my God, that is beautiful. And that is the quickest history of Disney’s history ever. And it is a hundred percent accurate, I’m sure.

The 12 principles are illustrated in this Tumblr. Who puts useful information on Tumblr? Just this person, just this person. Everyone else is just cats. It’s true. So you have this list of 12 things that are super useful and we can use them to help us inform our decisions about animation and just design it well like we would with any other tool we use all the time so the 12 principles in animation are in the book. I just wanted to prove it and even though there are a list of 12 things not like 12 things OK, I did one, I it did two, oh, I need a nap. There are actually kind of 12 concepts that build upon each other and kind of make a whole concept together and also, there’s really a short left list of them that we could use to the greatest effect in our work. So what I wanted to do is go through an example and show you how just three of them could make a really big difference in something we might put up on the web. Sound like fun? Cool! Because if you said no, we were going to do it anyways.

So something like a modal. So this is your basic modal entrance, it’s basically like you’re at the point I made it move. So this is just a modal confirming your reservation at a cat cafe because that’s a thing you do. Basically? Weird, I guess I will have the place to myself. But it’s really at the point oh, I should probably make this come on screen how, OK, transition, blah, blah, blah, OK, it’s there and that’s the point we’re at, right? I think we could do a whole lot more with, even something as simple as a modal. So let’s go through three principles of animation and take a look at how they can make this modal even better and we have the cat so it’s really good already, but we could make it better. We could design it. The answer to design is not sticking a cat on anything — everything. It’s kind of sad that’s not how you design, isn’t it? Oh, well, so let’s take three principles that can really make a difference. And not just like this thing that you’re like, done. Whatevs.

[10:00]

Timing and spacing. Timing and spacing is a really, really big important principle of animation. It’s kind of one of those things that you’re like, if there’s only one thing you ever learn it should be timing and people say timing is the key of comedy, it’s also the key to animation and I think if we can really master timing, we’re going to be experts on both. Yeah, clearly I need to work on the comedy. No big deal. So timing is essentially the amount of time it takes an action to happen. It’s essentially the duration of things. Not things altogether, but just one thing. But the traditional way this is shown or demonstrated is with an animation of a bouncing ball so I figured why not? I made a bouncing ball animation for all of you. Yeah! So exciting, right? If you’ve forgotten what a bouncing ball looks like, kind of like that. If that blew anyone away, oh, boy, you’ve got something else coming.

If we wanted to work on the timing of this bouncing ball. We can look at the path it takes while it’s bouncing. We have a couple of little bounces there. you are but if we wanted to mark the timing, we want to mark the duration of each individual action. So the timing of this ball bounce would look something like this.

And you notice a couple of things with that. Like even with just that timing, those last two bounces are a little closer together. That last bounce action is shorter than the other two, bobs that ball is starting to like lose momentum, things like gravity and friction are working against the poor thing and it can’t bounce anymore. So the timing of it, how quickly it bounces tells you something about that ball and what it might be physically made of, how hard it might be thrown against the grounds even though we all know it’s just a pink circle moving around on the screen. So spacing is very much related to timing and it’s really the thing that fills in the gaps of timing. Because you can take a certain amount of time to do an action, but you might change speed during that action and the way you change speed tells you a lot about the thing that’s moving and why it’s moving and what’s going on with it. So it’s the changes of speed of any particular action. The kind of in-between bits. If we wanted to mark the spacing of our bouncing ball, which of course we do, why not.

We would want to take a freeze-frame so basically every ball at 24 frames so we took a freeze-frame of the ball of each part of its animation it would look something like this. You notice where the ball is falling down because it’s being pulled down by gravity it’s got the widest spaces so it’s moving the fastest and at top, it falls back down again and speeds up. So when the frames are closest together it’s moving slowest and where they’ve spaced apart the most is moving the fastest and the way it changes speed gives us some idea of what this ball is made of and what kind of ball it might be, you know the fact that it bounces 3 times and all that kind of stuff, maybe it’s like a ping-pong ball of some sort. If this was like a bowling ball it would be thunk and that’s it and then my animation would be really short.

So timing and spacing do two really important things. They can really influence how an animated object appears to be obeying the laws of physics. This is all appearance-based right? Because none of it is actually real. There is no gravity on screen, there is no friction and stuff, we’re kind of making it up and making it emulate what happens in the world by making specific choices. It’s also really good to establish the mood of an object that’s moving. It’s a really interesting trait of humans in general but when we see things move, even though we know it’s not a real thing and we know it’s not alive, we try to interpret its movement in some kind of human kind of way. You can animate a button that looks angry and one that looks happy just by your choices of happen timing and spacing and that’s an interesting way of. Why is it moving that way? Is it happy? Is it sad? But we actually think that kind of stuff in our brain. So for us working on the web, timing is generally just duration, and spacing is easing. They are the most important principle of animation, the thing that’s going to get us the furthest in designing, but I looked at like CSS and there’s only like five key words for easing. How are we supposed to be expressive with this? How are we supposed to make this look real? It’s a pretty short list.

[15:00]

And even if you’re looking with a lot of prototyping tools, there’s a really short list. So the key to making really good spacing choices and really good easing choices for our work is to look for the ways we can create our own custom easing which with CSS is with cubic bezier function. On this particular site, you can also race them against each other. Yup, exciting, right? This is what I do all day, I’m just like doop, OK, race, race.

But the importance of these curves is that this is plotting the progression of our animation against time and places where the curve is steepest, we’re moving fastest, there’s the highest rate of change in whatever is happening, the speed or opacity or something, and where it’s flat it’s going slower and where it’s steep it’s going fast again. So this is kind of a fast, a slow, and a fast again which is a kind of nice-looking ease and out. And we can affect the shape of this curve and make some really intricate adjustments to how our animation looks, so the moral of story is everything is better with cubic-beziers, ice cream, pizza, whatever.

What kind of questions do we want to ask ourselves? Basically timing and spacing affect the way the object appears to obey the laws of physics, so what kind of physical qualities do we want this modal to have? Should it feel heavy? Should it be light? And also, what sort of mood or emotions should it show? In this particular case since it’s like confirming a thing that we are clearly very excited about, I think it should be a little bit like, feel a little bit happy, energetic, yeah like, congratulations, you are confirmed for your cat cafe, sweet. I feel like cat cafe should have some like civilized proper manners or something, I’m not sure why, but I just decided that.

And for physical traits, if this is sort of an important moment, like an end thing, we’ve finished a task, we probably want it to feel a little bit light and fun, at least a little bit light and encouraging because this is the end of a whole reservation task or whatever. He social definition I went and picked a different cubic-beziers function. And in like kind of cooking show fashion I’ll just show you which one I picked so you don’t have to watch me pick 50 different ones, because that’s not fun to watch. So this is the one that I picked and if you’ll look at this curve it starts quick because it’s steep and then it slows down at the end.

So in case you forgot what our modal looked like at the beginning, this is our sort of just eh, it moves, you’re like, eh, it enters. What? This is how I present designs, too, I’m just like meh!

I get hired a lot. No. Anyways, so now that’s where we started. This is just our kind of like, meh, it moves, we did it and then if we wanted to apply, had a lightness, had a feeling of a high-five, had that energy to it, we would end up with something like this. So it’s already changed a lot. Do you want to see it in slow motion? Oh, good, because that’s the next slide.

So we wanted to see it really slow to see the differences. You got that. So just instead of just being yup, OK, it’s like, hey, are you ready? And all we changed with that little bit of easing is literally that little bit of an overshoot there. It also felt like it was going faster, right? The first one was meh, and the second one was OK! So it’s got that speed up, it’s got that higher energy, it actually overshoots its destination, as well, it’s like I’m so excited to confirm your reservation, I could not even stop in time. So we got that extra energy just by thinking about what we wanted this to say. And also because I like efficiency and because a lot of these principles build upon each other, by creating that sense of energy, and have it actually overshoot its destination and settle back in we’ve also hit another principle of animation which is the principle of follow through and that’s described as the idea that not everything comes to a stop at once.

[20:00]

For a second I was a little worried no one was going to get that, because it was very quiet. Johnny Appleseed did not say that, I’m pretty sure Walt Disney said, but you know, Johnny Appleseed, Walt Disney, what’s the difference, really? Think about in real life. It’s not really true. I guess the classic definition or classically way people illustrate follow-through is imagining a drooly bulldog, and when he turns his head and then his cheeks kind of follow after him, and that’s always going to happen. That’s that sense of follow-through that even when he’s turned his head, his head has stopped, his little floppy cheeks are not going to stop at the same time.

We have that same thing with humans, you walk and you come to a stop, parts of you, your arm, or your hair or your head or maybe your shirt or something, take longer to stop.

So follow-through can be a really soft squishy thing like a bulldog cheeks or it can also be a hard thing like The Road Runner. His little feathers and his tail and everything took longer to stop than the rest of him, even for something as important as birdseed. So for us as interfaces since we don’t have bug dog cheeks and Road Runner feathers and stuff, is a lot of the times for us, follow-through translates to that overshooting the target position, having that sense of energy that’s so great of whoa! I couldn’t stop in time. That sense of energy is what we can use to create a follow-through. The easiest way for us to get that is the way that I did it by totally picking an easing curve that goes outside of the box. It’s one of those things that is a pretty easy win when you want a little extra energy. It’s one of those in case you missed T so that’s two principles of animation we’ve added to our modal and we’ve taken a look at timing and spacing, we’ve decided what sort of physical traits it should have, what it should express and because of the timing we picked, we also got some follow-through, as well, so it’s like two principles, as well, pretty good deal. So let’s look at the third one.

I think this is a very effective one. Is secondary action. Which is really defined very much like it says, you know, like its name. It’s basically any action that supports the main action, it’s something that happens in concert with the main thing, makes it seem bigger, better, or more dramatic and gives it more dimension, so it’s like, you know, anything that happens in a secondary way to support the main action. An example of that, I guess in like traditional animation, a lot of it is things — it can be anything from like a character swinging her arms while she walks to show that she’s really happy, or someone whistling while they walk or anything like that, some sort of secondary thing that further communicates what the main action wants to be saying.

On screen or interfaces we often see it in things like this. This is a Twitter-like heart animation, I tried to pick something that you guys might use all the time. When we click the heart we get this whole action. The main action is the heart actually scaling up and scaling down and turning red but that secondary animation are all those dots and circles coming out. And the image below is actually the sprite or most the sprite of the animation behind that one. Where it starts from a little dot and gets a bigger dot and then the sick. Really making it seem more dramatic and more effective and more like the satisfy like of a tweet.

So I feel like if we threw a bunch of dots and particles on our modal, that wouldn’t really work. A lot of the — you know, one other way we can get secondary action in interfaces is to think of things more as a collection of parts, instead of one solid thing. Like if you think of any carousels you’ve seen recently or slide shows or whatever, there’s a tendency for things all come in at once and there’s this one thing that slides in and there’s a text and a photo and maybe a call to action, and that one slides out and the next one comes in and they’re always moving as if they’re one piece together. Like almost like they’re etched in glass or something.

[25:00]

So since we don’t have the idea of limbs that we can swing while we walk, we can look at things like child elements and elements around things that we’re moving to create secondary action. So for our modal, I decided I was going to — or consider the various bits of text in the modal as kind of like separate pieces, so like what if we considered like our title and our date and our paragraph as things that can move just a little bit independently of our main modal. So the main action that we have is our modal being like, I’m coming up into view, but what if our like paragraph and our text just kind of like a little bit behind it as if they were being pulled up by that main action and everything settled in together so I decided to get a little secondary action in here, I wanted to create a bit of an organic wave thing, where they go up together, they meet at top and then go back down. So to do that I created a second animation that was a little bit smaller than our whole entrance animation and applied it to our text and our title and had it start a little bit behind the main action, so when we apply that bit of secondary action to t we end up with something that looks like like this. So we’ve got the text and the title coming behind, it — you want to see that one in slow motion? Good, because that’s the next slide.

I love it when a joke works twice in one talk.

So in slow motion which gives you a better idea of how that secondary action works, we have that modal coming up, and those two pieces are just a little bit behind as if they’re getting dragged up behind the modal. Adding that secondary action also accentuates the follow-through. And because we have all of those three pieces all kind of moving up and down together, it also does a better job of guiding your eye down to where the button comes down at the end to make a new animation, so we’ve got this whole arc and flow to follow in a whole different way and it really works out well for our mode at the end. So just take a few minutes to kind of consider this modal and we’ve made it feel a lot more life like, we’ve added some energy, some intentional energy, no matter what, if we animate something, there will be some personality or energy, but when we take a few minutes and actually think about what we want it to say and try to make it say that, it’s so much more effective. So we’ve made our modal much more energetic, kind of live and organic feeling. And it really fits both the occasion and the content and the design, it’s silly things about puns about purrfect …

So the — you know, by giving that timing and spacing and follow through and secondary actions and consideration, we’ve gotten our modal to a point where it communicates more than it did before. It communicates intentionally. We made decisions for it the same way we might have done with like type and color, we just applied it to motion, too. So the way to get this stuff done we kind of just do this here in a couple of minutes. Almost like it’s a linear process, but we all know that’s not how design works, you know, you try things out, you see if they work, you see if you like them, you see if they say what you want them to say and you try things out. So for motion you really want to have some way to prototype, iterate and test your ideas. Some way you can get things moving on the screen in front of you to see if the things you plan out in your head really turn out the way you think they do. You can act it out like I do, which is really fun, but generally not as effective. So sad.

I mean even me, I found if I’m going into design reviews, and critiques and stuff, it really helps if I have a prototype instead of just going like this. And they’re like, who invited her and I’m like, I work here.

[30:00]

But the nice thing is for us as designers, there are so many protein typing tools that handle animation now. All of these ones, probably more. I made this slide a few days ago, there’s probably more right now. There are a whole lot of options that you can use to be able to animate things yourself. Something as easy as keynote. It was really, really great or you can go all out with aftereffects and things like that but there are so many options. But I would find a tool that works for you. Show your boss what you’re thinking as opposed to just acting it out. Actually I love to show the prototype and act it out because I feel like that’s a double whammy kind of thing. Do you need me to dance it out for you? No. So a couple of my favorites in this list, I think the easiest, most approachable, one is keynote. This triangle one is Atomic. It’s browser based and pretty handy, and InVision, which doesn’t do a whole lot of motion yet.

There’s rumors of new motion coming: So we just look at this modal and we basically spent, you know, not a whole lot of time but a decent amount of time on just like one animation and if you kind of think about, you know, designing sites and apps in general, usually you animate more than one thing. It would be kind of weird to animate just one thing ever, so we have to start thinking about, well, cool, so we made this modal do it its thing happened then we have this button that also animates. Do we start over and go through that whole chain of significances again for every single thing?

Because I’m going to get really tired from designing if that’s how we do it. So it’s a good idea of how to think your animations and what you want to say on kind of a higher level. Looking at how you would want to express your brand in motion and the things that your product want to say and how you can say that with motion, too. So I find the easiest way to figure out what it is your brand should say, because that’s a really hard thing. It’s not a thing you’ve got off the top of your head. So I’ve found a good place to start with that is start with your voice and tone documents. The things that you want your content to express, the kinds of things that you use to figure out how you’re going to write or what you’re going to write. That same source is a really good place to figure out what your animations should say.

Because in a lot of those documents talking about voice and tone, you use a lot of adjectives to kind of describe your brand and what you’re all about and your personality and you can apply those to design and motion, as well. So you might say things like I really want to be energetic, or maybe we’re friendly or sleek or strong or playful. Oh, that was all of them. Those are your only options, you cannot do any more than those five, sorry. But there’s words that we describe to describe our brand that can also be applied to motion. For example, things like this. So when we do things, like we saw with our modal, like if we use animation concepts, like follow through and anticipation, and anticipation is basically the inverse of follow-through, and anticipation is I’m about to do a thing and then you take off. That’s it in a nutshell. But those of these create an extra sense of energy. That little extra movement at the end gives it that sense of energy, and that kind of friendliness, too.

If we look at concepts like squash and stretch, which are seen another principle of animation that we didn’t look at today, but it’s totally a one fun one to read up. Squash and stretch when it’s done too much tends to look really child I shall but when it’s done just a little bit and in a very stylish way looks really great. And it creates even more energy and is kind of like extra friendliness. Mostly because it’s kind of like wobbly and soft around the edges, right? You get that sense of OK, cool, we can bounce around, do some things.

Dealing with timing and spacing or choosing easing that’s more like an ease and out, things that start out slow, fast in the middle and then slows down at the end. Our model kind of went up and over like this, but if it was just like I know exactly where I’m going and this is where I’m going to be, it feels very balanced, very measured, like its determined, it knows what it’s going to do, it’s very solid and sure in that sense. So using that kind of motion can project that kind of feeling, as well.

[35:00]

Smaller movements, like a lot of the motion we’ve been looking at so far has all been pretty big. Like even the modal entrance we did was like this giant entrance from the… But using smaller movements, suggesting a movement instead of showing the full thing. Like if you move an object from down here to up here, you’re still giving that sense of upward motion, you know, motions can be smaller and less drastic and they tend to read as more calm and more subtle: So you’re still using motion and getting those things kind of appearing and having entrances and exits, but in a smaller and more subdued kind of motion path.

[40:00]

In the same vein, animating things that aren’t motion, nonmotion properties like opacities and blurs and filters can give things a stable and gentle and mellow feel. When you have things flying around and moving, it’s very attention-grabbing. It creates a sense of energy. Even if you only have one thing moving, there’s that sense of energy and things that you can’t avoid, but when you have things that are animated that aren’t actually moving, you have that more stable sense where people kind of fade in as opposed to moving in, it’s kind of more grounded, has stronger roots. I should have played what I was talking about, but that’s all right. You all know what opacity fades look like.

So those are some ways that we can take that we’ve already decided about our brand and apply them to motion so that everything is saying the same thing, because motion is really just another design tool, another way that we can say the things that we want to say, so it should all follow that same flow. It doesn’t have to be that extra thing that you do later like oh, we’ve designed that site and now we have to animate it and we can do all of this work. It can kind of come along the same path and that everything else did, the same things you want to communicate and having the same message.

But I wanted to take a little bit about the bigger picture, too, because like we said, you’re probably going to animate more than just one thing, unless you have some crazy plan of moving one thing and nothing else. We also have to do a little work to make sure they fit together. If we’re going to be animating a bunch of things we want them to work together kind of like in concert like they’re all related in some way. So many animations, making them seem like they belong to each other h like they’re all siblings from the same family instead of a bunch of strangers that are like, hey, I have some crazy dance moves and you do, too.

So for that, you have to look at choreography. We can do that when we’re animating, because we’re like directing all of the animations to be like, oh, no, no, no, you can’t do that, you have to do what this guy is doing. It’s a good way to feel like you’re in charge. That they’ve got a similar plan and just a similar approach to animation and life in general. So a couple of ways that will make are good for making it seem like your animations are all working together, I’ve got a few of them. So one of them is having your entrances in — sorry, to have similar objects move in similar ways. Kind of like the way that like, you know, if you have content that is there for similar reasons or is like the same thing, it’s probably got like the same type treatment and the same color, right, so it probably also should move in the same way.

So you want something more like this one, where all of these thumbnails are like doop doop doop doop, all the thumbnails take the same action. They also have the name motion, they’re like I’m a thumbnail, cool. On the other hand, you might often see things like this, where every single thumbnail has a different entrance. There’s things that we can do to plan out and make sure that things that are similar behave in a similar way to avoid cause that go extra sense of confusion. That first one feels so much more put together and all you did was use same animation for thumbnails. Pretty easy win.

Having entrance informs exits is really great for having cohesive choreography going on. You have your little modal, and you’re like done and it goes back down. But if that same modal entered from the bottom and once you were done with it, it went out to the right, you’re like, why? What did I do? And having these consistent entrances and exits also makes it easy for people to tell where to go to find something. If there’s no rhyme or reason, it becomes confusing and extra awkward for no reason.

One of the most effective ones to create a sense of shared choreography, I often see some tweets, some very like, I don’t know, strongly worded tweets where people are like all my interface animations take exactly.2 second. All of them no matter what, and if you make them other than that you’re wrong. You know, picking one duration for all of your animations sounds like a good idea in a tweet, but in practice it’s not so great. But if you think about what we did with our modal. We had one animation that and like if those had the exact same duration, our modal would move really fast and our text would be so slow, because it would move a very short distance in the same amount of time and their speeds would be very different.

So when you match duration it is, you can get things moving at very different speeds, which feels awkward and weird, but instead when you try to match velocities, things feel like they belong together, they feel like they’re coming from the same place. There’s no really good mathy way to do it, you have to look it and see if it works. If we went with matching durations, like that angry tweet told us instead, we have things moving at a very different speed, like these two squares, so they took a same amount of time to move the same distance. So they feel very different and like bottom square felt very rushed and it gives a very different feel to those motions. So matching velocity helps us keep that consistent feel to things. Another thing to think about is whether you want to have your whole group of animations be cohesive and consistent. We often talk about consistent choreography but consistent suggests using the exact same thing over and over. But you could also have changes be more cohesive instead. Show you an example of that. This is Nixon watches. So if we play that, oh, no, getting ahead of myself. I’m so good at slides. Really? One more try.

Yeah. So they have a lot of navigation, it all animates the same way. Each one is voomp, voomp, works really well for them, because they make watches. I know, it’s a bad one. But I cannot say it. So for them that kind of mechanical sense of ta da, ta da, ta da, works very well.

But if you look at so Twitter. As they do for things their badges, adding aping and as you get new badges and earn more points. I’m not a very impressive swarm user. So if you wanted to find out more about choreography or listen to people talk more about choreography, I have a podcast called Motion and Meaning. If you’re into that sort of thing, creating choreography and that kind of stuff. So there’s one thing I wanted to get into and that is to find inspiration. It’s really hard to know if you’re making good motion if you can’t — if you don’t know what good motion looks like, right? And that’s a very subjective thing. Very much like design.

[45:00]

What I think is good design may not be what you think is good design, but they’re probably both actually good, there’s just that nature and that perspective on it. so I have a few recommendations to kind of get a sense for what you think is good motion and the kind of motion you want to make. First one is art and the title, if it goes. It’s cool. We don’t have to have a remote, so the first one is artofthetitle.com. A second one is capptivate.co. Watch out for the double p. How various mobile apps handle animation, I really like this one because she posts more than one from the same app. And you can get a better sense of how motion is used throughout the app, what they try to say throughout the motion or if motion fits their brand and that kind of thing.

Another great one is use your interface. They have these really great categories or if you’re ever like, oh, you know, I feel like this drag and drop interaction could use some better animation, I just don’t know how, you can look at their drag and drop category and see how ten other websites did it. So whether it’s these three or something else like Vimeo or anything else, looking for motion that you think is good, upping your taste in motion is a really great way to make your motion that you create better, because once you increase your taste level you can do a better job yourself. So, yeah, like Steve said, I just recently finished a book, so if you like this stuff, you can totally check it out. This is a picture of my dog with the book. It’s approximately half the size of a small terrier. It is technically not all until next week but you can preorder it and if you want to, that’s cool. Thank you so much for talking animation with me.