[MUSIC]

So all of us here, I mean everyone here today wants to be better designers.

We wouldn't be here in a dark theater on a Friday afternoon at a conference

freaking out over design things if we didn't.

That's kind of what we're in to.

As it turns out understanding the best ways to use animation will actually

make you a better designer.

It's totally true.

Taking advantage of animation lets us communicate on a whole other level and

it just gives our projects a kind of life and

depth that other design tools just really can't.

I mean, things like typing, color, and hierarchy are super awesome and

I love them, but they just don't have the same capacity to communicate as animation.

They don't have that same, essentially that whole other dimension of time.

I actually think that we should use more animation in our design work,

and some people think that's a really terrible idea.

Some of you might think it a really terrible idea, but

then why would you be here if you did?

But whatever, it could happen, I don't know.

But I totally understand that standpoint because due to things like, oh

I don't know, banner ads, skip intro, and other terrible crimes against humanity.

Animation on the web has a really bad reputation.

It just doesn't get enough credit.

I kind of feel bad for it.

Like, you're not all bad.

You can do good things.

I know you can.

[LAUGH] A lot of times when I talk about the idea of

using more animation in our design work, and more animation on the web.

People assume that we're going to end up with a whole internet that looks

like this.

And for anyone who's wondering what's

happening which is probably every single one of you.

I'm scrolling down the page and

everything's just flying in from god knows where for who knows why and

then when I get to the bottom I can scroll back up and do it all again.

[LAUGH] Yay?

It's like, hopefully, no one just lost their lunch over that.

But, more animation in our design work on the web can also mean things like this.

This is Stripe Checkout, if you've ever re-upped your Gerbil Pro subscription or

something, you've used it, and for many other things as well.

And when they designed this whole experience this whole

process of checking out with Stripe, they wanted to feel sophisticated, modern and

trustworthy and one of the main things they used to do that was animation.

And if you compared the total number of animations in that GoChat thing to

all the animations you see going through the whole process of Stripe Checkout,

you might end up at a really similar number.

Because the difference between these two kinds of animation isn't the number of

animations, it's not the amount of animations,

it's the design behind them, the idea that the ones in Stripe have purpose and

style, someone has actually thought about the design of those.

The ones in the GoChat thing, I honestly have no idea.

But the kind of animation that we want to use is the kind that Stripe has.

That's the kind we wanna have on our own work.

And really great UI animation has both purpose and style.

It's like both things have to be there.

You can have a really beautiful animation, but if it's there for no reason,

sorry it's not a great UI animation.

And if you have a really useful animation, but it's the ugliest thing I've ever seen.

It's not really gonna work either.

So today we're going to be talking about crafting a style and the look of

these animations, of getting those design decisions behind how to have style.

We won't be talking about useful places for

animation, cuz that's a whole other talk.

We'll be talking about how it looks and getting that style.

So the way, when it comes to designing the way animations look,

if we're web design people or if you're a web design person like me,

we don't have much background in motion design.

Generally that doesn't get taught in web design school, it doesn't get taught in

design school and maybe even if you do you probably haven't had to use it in like

a million years because we couldn't really do this stuff very well until recently.

So it's not something we're very familiar with in like a book smart kind of way.

But don't worry this isn't going to be one of those talks from like Zandra should

code and should product manage and run everything and

like Zandra should do all the things.

And you're like.

When it comes to this animation stuff it's a lot of stuff that we've seen a lot in

things we've watched like cartoons and films.

We just don't have names for it, but once we get the labels and

we start recognizing it and it's really not that big of a stretch.

It's not that much of a stretch from design.

And the place we get these design decisions or

how we make the design decisions behind this motion generally relies on

the classic principles of animation.

You've probably heard of the 12 principles of animation and if you haven't,

you might have heard of a company called Disney who effectively wrote the book

on that, which is this book, The Illusions of Life.

Written in the 30s.

It's about this thick.

It's pretty heavy. It's awesome.

It smells like old library.

And this is where the 12 principles of animation came from.

Though interestingly enough,

the book is this think and the 12 principles of animation is 20 pages.

So there's even more to it.

It's crazy.

If you don't like books, there's also like a Tumblr version.

Actually it's a really good summary of the 12 principles of animation and

what they mean and really good examples of them.

So these are the sort of things we rely on to make these design decisions and

apply them to the things that we're actually making.

And the reason or what Disney's animators were writing about in the Illusions

of Life was effectively trying to encapsulate all the techniques and

things they used to make it appear like these 2D hand-drawn things were happening

in real life, how they effectively created life on something that had none of it.

For us, our goals are a little different, because

I assume no one is actually hand drawing cel-by-cel any of their web UI stuff.

If you are, I'd love to know how that works out for you.

So we're dealing with computers and things onscreen, so our approach is different,

our tools are different, so not all 12 of these principles really apply to us,

and our goal isn't exactly the same.

Our goal is to have relatable motion.

We want to create motion that people see and

that makes it feel like this stuff that we built has some life to it.

Obviously, it's not really alive.

It's not real stuff, and we're not trying to make it look like real stuff.

We're just trying to make something relatable.

Something as humans who see things in the real world, might be like, oh,

yeah, that I kind of feel like I know what that's all about.

So I've put together a little example for us to apply this design thinking to.

Don't worry.

It has cats.

I know that you're like not allowed to demo anything on the web without cats so

if there's any internet police out here, I got cats, don't,

I don't need to be, you know no fines or anything.

And it's also the one that I did for the NetMag cover story.

So I've created a confirmation page confirming our reservation at a cat cafe.

Which, if you've never heard of those it's a place you can go, and

you can drink tea, and like, hang out with a million cats.

It's pretty awesome.

They have one here, not here, but in New York.

So I'm pretty excited about that.

And this is our little confirmation page that I made.

I mean, it's okay, it moves, but my problem is that or my problem

with it is that it doesn't really, there's no excitement there, right?

If we were to act out the motion, which I totally recommend you do, especially at

important meetings, he's effectively being like, your reservation's confirmed.

And that's kind of it.

And it should be more like, your reservation's confirmed.

Yes.

I'm excited to go to the cat cafe.

This is not exciting.

We need to fix that.

So let's take a look at some ways that we can fix it.

First, what's going on behind the scenes.

There's a couple animations happening like this one.

I guess we're a tiny bit cut off, but that's cool, whatever.

There's two animations happening.

There's a slide in and there's a fade up.

They happen at slightly different times and they both just kind of ease out,

nothing fancy.

The two set of key frames behind those are what's running them are our slide in and

our fade in.

They're super simple sets of key frames,

which is how I like to keep my key frames, the simpler the better.

So let's start taking a look at some of these animation principles, essentially.

How can we improve this, how can we get that energy in there, and

make this reflect the idea of like I'm totally psyched to go to the cat cafe, and

hang out with like 100 cats, and drink fancy tea.

That's totally what I want to do.

Timing really is everything.

Like completely seriously everything.

You may have heard that timing is the key to comedy, right?

It's also the key to animation.

So if we follow the logic, if we can master timing,

then we can be experts at both comedy and animation.

That's kind of awesome.

Oh, okay, nevermind.

>> [LAUGH] >> I think it's awesome.

You guys apparently have already mastered comedy so

we'll just talk about the animation part.

Timing when it comes to animation is essentially a thing that

makes objects appear to obey the laws of physics.

That comes directly from the Illusions of Life book.

They're trying to create animation that alludes to life and

things like physics and gravity exist in real life.

So you wanna have those in timing in your animation as well.

And for us, timing has kinda two parts to it.

The main part is the duration of our animations.

And if you think about things like how fast something moves suggest how

heavy it might be.

That's kind of directly how you get some physics out of it.

In a more subtle way, timing is also responsible for establishing kind of like,

the personality and mood of the way something is moving.

When we look at things that are moving and

we see things that are animated, and we have our normal human approach and

normal human brains, we try to make sense of the animation that we're seeing.

We're like, why is it moving fast?

Did something push it?

Is it heavy?

Why is it so bouncy?

What's going on?

We kind of, maybe not word for word like that in your head.

That might not be your internal dialog, it's generally mine, but whatever.

We wanna kinda create this story and

reason behind why something is moving the way it is.

Sometimes it's not really there but we just make it up.

And that's where we get this sort of mood, emotion and reaction to it.

Based on how something moves, and

in this case this is mostly controlled by our timing function,

especially in CSS Is the easing we choose can really effect this part of timing.

Some people call this aspect of timing spacing.

I don't really care what you call it, as long as you think about it.

You can call it Bob, you can start a new trend.

Anyways, so timing is super, super important, and

timing is essentially things like our timing function, and CSS.

So you look at the CSS key words for timing functions and there are five.

Five things to communicate all this important stuff.

We have to communicate both the key to comedy and

the key to animation in five things.

This is a load of crap.

It's not possible.

And then when you think about it more,

especially when you put on like your super skeptical sarcastic brain or voice.

You're like, well linear is completely mechanical motion that has the exact same

speed all the way through, and nothing in real life moves like that, so

if our goal is relatable motion that's out.

Four, and then ease is just really this kind of crappy version of ease and outs so

you probably shouldn't use that anyways.

So now we're down to three, and even if you don't think it's crappy it's basically

the same as ease and out, so we have three of them, and you're just like this is

never gonna work, but that is why we have things like the cubic bezier function.

Or as I like to call it, number barf.

>> [LAUGH] >> Yep, and

a lot of times we don't use these so much because we're just like, what?

Seriously, what?

Like, that doesn't mean anything to me.

Like, nobody talks about motion in this sense.

Even your most hovering of hovering art directors is not going to be like,

you know what this needs?

It needs more of a oh, point oh four six,

probably a nine oh five six, one point two, yeah.

Nobody does that.

That's not how we think at all.

The way we tend to actually, or thankfully, we can actually read these in

a much easier way, and that is with motion graphs.

And this is effectively the same thing we looked at with a number bar.

This is just mine, so we can read.

We plot the progression of the animation against time, and the start and

finish are fixed because It has to start at the beginning and

has to end at the end, that's kind of how this works.

And, if you're wondering, if you're super mathy, those four numbers in the cubic

bezier function are the X and Y coordinates of those two black dots, so

it's sort of like you have a very simple version of Illustrator going on here.

You can pull those control handles and change the curve, and

anywhere that the curve is very steep, it's moving faster, and

where it's flatter, it's moving slow.

So this here kinda starts slow, goes super fast in the middle and ends off slow, so

you've got some sort of ease and out.

And this lets us create basically any sort of easing we can possibly imagine, but

if we rather have someone make it up for us,

there are things like easing.net, which is pretty awesome site and

has the CSS cubic bezier equivalents to all of the Penner easing equations.

So if you used those before they're all here,

if you've never heard of them there's this guy Robert Penner who has apparently

divined all these easing equations and we use them for everything.

I kind of wish I was Robert Penner, anyways, that didn't make any sense,

but the interesting thing about these or, I guess,

the most notable thing about these is if you look down into these columns,

like all of those ones that start with ease in, whether it's ease in cubic quint

or whatever else, they have a really similar shape to the curve, right?

It starts off slow, ends up fast, but there are so many variations, like,

even here there's a bunch of variations, and then if we want to get really crazy,

we can go to places like cubicbetsy.com and make our own.

Drag the handles.

Do whatever you want.

And then when you're done with it, you can race it against other timing functions.

Yeah.

Pretty cool.

Great office game for you all on Monday.

Go to Cubicbetsy.com, bet one of your coworkers which one's going to win.

>> [LAUGH] >> Spoiler alert, always a tie.

>> [LAUGH] >> But they don't know that.

So you can probably get like, at least one free coffee or lunch out of that, try it.

Let me know if it works.

[LAUGH] So there's a lot of handy tools for creating these, and we kind of,

you could say we have almost no reason to use the basic keywords in CSS.

We should get a little fancier and do stuff like this,

be more expressive with the easing we pick, and to actually pick the easing

we pick instead of just being like ease out, like think about what you want.

So everything is better with

cubic beziers in case you didn't know that was the point.

The point is that everything is better with cubic beziers.

It's really great on like pizza, things like that.

Awesome, everything is better.

And normally the way we go and pick the cubic beziers for our cat confirmation,

or any project, we pick it out the same way we pick type really, right?

We might do something like, there we go, I was like why is that slide blank.

We might do something when we're picking type like think about what we want to

express or what we want it to say and then we pick a typeface that matches that,

or we might go to Photoshop and just pick everything on our list.

You an go either way with that when it comes to picking easing.

For this one, I'm like okay,

my biggest problem with my confirmation box is the energy is just not there,

he's all like, confirmed and I want him to be like, confirmed!

So, to do that i probably want an easing curve that kinda shoots,

over shoots this destination.

Kind of sticks out of the top, it does something a little bit more fun.

So i like to keep it busy and not, so

I went to cubicbetsy.com found this probably, messed around a little bit more

with different ones, but this is the one I ended up on.

And then I went and put it in my CSS code, so instead of that little ease out,

I was like cubic bezier, I added some number bar, yay.

Awesome.

And now our cat confirmation box looks a little bit more like this.

And he's like, hey!

So just changing the easing, we're getting a bit more energy, right?

This is feeling more like my excitement of going to hang out

with a bunch of cats and drinking tea.

I can tell that there's five of you who are also excited by this.

The rest of you, seriously, you just gotta get on board.

Cats and tea, come on.

You can have coffee.

I'm sure they serve coffee.

So we're one small step closer to making this a little bit better, and

we're giving it some more energy, just that kind of lover shooting and

settling back in, just feels like it has so much energy.

So much energy it can't stop, and that also conveniently

kind of fits in with the second animation principle of follow through.

Technically follow through means that not every thing stops at the same time.

There's I think it's a good story.

I'm not sure if it's a good story, but the way they explain this particular one is

they were like, I mean the Disney animator guys, cuz they were all guys.

Disney didn't hire women, there's a whole thing about that, but they were like,

showed some of their dailies to Walt Disney and were like, hey Walt,

we made this thing, and apparently, he went all hovering art director on them and

was like, you guys know that not everything stops at the same time, right?

And then they were like he's right and that's how follow through came about.

I've no idea if that's true, but I like the story, but

it also makes Walt Disney seem like kind of a jerk.

So maybe I don't like this story.

I don't know.

We'll decide later, but that's essentially what it means.

For us, since we're dealing with things that are generally square boxes that don't

really have parts, we kind of interpret follow through as being anything that

maybe like overshoots where it's going and has a little bit like,

whew, oh yeah, here I am.

That kind of thing.

So it's a loose general, a loose interpretation to follow through, but

we're gonna do a little bit more of that as well.

So that's two principles we've taken care of there.

And don't worry, we're not gonna go through all 12 cuz we don't have all day.

And for some reason, I decided to show it to you again in case you forgot it.

That's actually my cat, by the way, if you wanna hang out with him.

So random aside time, oh wow, it's random aside time already.

Half this talk is a random aside.

Anyways. [LAUGH] variables are awesome for

keeping your cubic beziers sane, if you share the opinion of number barf

like i do, I've never said number barf as many times as I have so far today.

Anyways, if they're hard to read and they don't make a lot of sense, so

instead of having something like this or instead of having those all over your

code, using variables like sass variables or

whatever your pre thingamabob of choice is, I like sass, you make some variables,

hook them to your cubic bezier functions, give them meaningful names, and then when

you go back in your code and you have to read the stuff that you wrote last week,

you can see things like this, and you're like oh, okay.

Is it a single list of numbers?

I know that's an ease out, and if I'm like super familiar with ease out back.

If it's like my most favorite ease out ever which maybe it is,

but I don't think it is, maybe it is.

If it was, I probably know exactly what that looks like.

If nothing else, I know it's an ease in, and more importantly if I've used that

same ease in like 600 times like once on like 20 and

once on like one million I'll know, because it has the same name.

I might not recognize the same set of four numbers, so

that's my super hot sass tip for cubic beziers.

Back to talking about animation.

The third principle I want to apply to

our confirmation little window guy is secondary action,

and basically that is anything that kind of happens to support the main action.

A lot of times, people explain it in cartoonish terms.

They're like oh, it's like a character whistling while he's walking.

Whistling gives you some idea of the mood, and why he's walking the way he is.

He probably wouldn't be whistling if he's going to fire someone, or something,

so he's probably happy, but it's not required for walking, at least, not for

most species.

I don't know.

On the web, we tend to completely ignore this idea,

that things have parts and those parts can move differently than the parent.

If you think about any like you know feature image slideshows or

like carousels you've seen recently, there's probably like an image and in

front of that image there's a box, and in front that box there's probably text and

maybe there's a button on that box in that box as well and

the slideshow happens like this, all those parts slide in, then they all leave.

And they come back with a different image, different text and

maybe a different button label.

And then they leave, all together, but like, why?

If we're having the same stuff come in and

out, why can't some of that stay on screen?

Why can't some of it move differently than its parent?

Why do we act like everything on the web is like etched into a pane of glass?

I don't know why.

I assume because we're just, I don't know,

it just seems to be like what everyone does, and we just keep doing it.

But we can break these things up more, and actually have them have parts, because.

Websites don't really have legs and arms and appendages usually, so to add a little

secondary action to our confirmation box, I'm going to have my titles and

text move in a slightly different way than the whole body of the box,

cuz that's the closest thing this box has to arms and legs, titles and paragraphs.

I'm not really sure what that metaphor adds up to, but whatever.

So do that I'm going to start by creating a second set of key frames,

which is really just a short version of my slide in key frames.

My slide in key frames goes from like 400 pixels, to its intrinsic place, and

my slide in short, goes from like 80 pixels to its intrinsic place, so

it's a shorter movement, same idea though.

And we're going to end up applying it, oh actually,

I can show you, we're going to apply it to our H3 and our H2.

And also to our paragraph,

we're going to apply them with a little bit of a delay as well, so

we're not going to start it at exactly the same time as the rest of our stuff.

So we'll give it a little bit more of extra follow through,

as well as that secondary action going on too, so it's like paragraph arms and legs.

And when we put that all together, it's like oh, hey,

it's sort of like he's got a lot more energy too, and he's like whew, yay.

And it's really more like a real person,

right, cuz if I was gonna be this confirmation box and I was like, hey,

reservation confirmed, my sweater and stuff moves and stops,

at a slightly different part than my hands and everything else, so.

This has kind of become life like with these just couple of tiny changes.

Like this thing that clearly is not alive or never happens in real life.

I mean I've never seen a box just pop out of the sky or air in front of me.

Maybe you have, I haven't.

But we've added a lot more to it to make it more relatable and

seem like something that could exist in real life, and

that's really what we're aiming for is just getting that energy and mood to it.

And suddenly this is something that instead of just being like,

transition all, we've actually designed it.

You're like, this is so much better, but there's always one more thing.

There's always, always one more thing.

Specifically for this, to speed it up.

And what I should really say.

Speed it up.

I should probably put like 700 exclamation points there,

but it wouldn't fit on the slide, so I stopped at two.

We have this tendency, when we're designing things, and

it totally makes sense, we're obsessing over all the details, right?

Like in the same way that you might spend like,

days picking the perfect typeface for something.

>> You might spend days getting the perfect like, motion and

just designing stuff, and being like, yes this is the easy I want.

This is how I want this all timed, out here's how all the parts work together.

And you stare at it for

hours, and hours, and hours, and you just want to see every little detail.

Because you want to see all of your effort there, and

the time it takes us to design that, and even examine all those little details.

Is the law longer than it take anyone to read it.

Anyone rlike eading that motion, and looking at what we've done, and

watching it later, they're going to get that same meaning that we've put all that

time into putting together, in a fraction of the time it takes us to look at it.

So essentially, anything you got, take the duration and

make it like half of what it was, maybe even smaller.

Again because, if you've been obsessing over it, it is totally too slow,

you just don't know it.

It's true.

Mostly I tell you this to save you guys super embarrassing stuff,

cuz the very first like heavily animated, or

like major UI animation project I ever had, was a kiosk for a hotel.

I was working at an agency, and we did like this kiosk stuff for a hotel chain.

I was super excited, it was my first lead design job.

I'm like, yes, I'm in charge, everything will be beautiful.

And we got to the point where the CEO people from the hotel were coming into

the agencies.

>> To see what the creatives have made for them, and

the big deal was like the CEO guy was going to get to use this kiosk for

the first time, and I'm like this is going to be great.

He's going to love it, and I'm going to be like the best person in the whole agency

ever, and like everyone will buy me beers, or something and it will be great, but

then he's sitting there crazy super serious suit guy.

Sitting there using this kiosk, and every time he touches stuff and goes to next

screen, he's getting more and more annoyed at how slow my animations were.

Suddenly it went from this thing I was like yes, and

was more and more embarrassed, and was like oh God, oh no.

He's not done yet, it's still going.

So I want to save you guys doing, living through that whether it's for

a hotel CEO or not.

So just make everything faster before you show it to anyone else, and

you won't have to go through that.

Cuz, kinda sucked.

Anyway, learned my lesson.

So, make everything faster.

And tis is kind of our version that's a little bit faster.

And it can maybe even be faster still, but keynote and

screen recordings have trouble, so that's what we've got.

And that's what we ended up with, we have something lively, something much more fun,

and I've probably convinced maybe five more of you to

be more excited to go to the catcafe, I've probably got at least a crew of ten now.

Yeah.

Definitely.

So some, one other part to the style of these animations is not just how they

look, but also how it behaves.

And I kind of took the easy routes and our example, well it

didn't really have anything we interacted with, but a lot of the animation we're

actually gonna be building, is stuff that people interact with.

And that kind of changes the way we have to look at our timing.

The speeding up thing is really important for that, of course.

If you are clicking on buttons and

they seem to like take forever to respond to you, that sucks and no one likes it.

Things like that are pretty obvious, but there's also some finer points, so

just some things to keep in mind for that part, of how to make sure of the behavior

of what you're creating, something that feels like it's nice to use.

So some helpful tips for that.

Ease outs tend to feel more responsive.

And that's kind of anything that starts out fast and goes slower.

And if you think about it, it's cuz like, ease ins are sort of like hey oh, what?

Did you want something?

And ease outs, that was ease in and ease outs are more like hey what's up?

I'll show you what I mean more specifically with buttons.

Cuz, I dont know, does everyone else act this stuff out in meetings?

I do all the time.

And sometimes people don't ever ask me back to meetings.

Either that or they're like get her to do it.

Anyway, the one on the left is an ease out,

and the one on the right is an ease in.

It's not as obvious when you're watching as when you're using it.

This guy on the left, he's our ease out and the right is the ease in.

You get this tiny little bit of a hesitation on the ease in button,

where he's like woah, what?

And, on one single button, doesn't make much of a difference.

It's a fraction of a second, right?

But across your entire site, or entire app, or entire whatever else you're

making, this adds up and can start making things feel a bit slow.

There's a great tweet, which I did not bother to put it in the slide, but

I will tell you about it anyways.

It's by Kenneth Boles, and he talks about when they redesigned TweetDeck,

he was saying that the one thing that he changed in this one update,

was he basically just shaved I think 0.25 seconds or

basically milliseconds off every transition in all of TweetDeck.

That's all he changed.

Only design thing he changed.

>> And all the people were like wow Tweetdeck is so much faster,

it's amazing you did a good job.

It was like all I did was change the transitions, but

because it was every single transition over the entire application,

you get that like perceived performance like Laura was talking about this morning,

like it just seems faster so that's important.

And then maybe you can do things like that,

where you're like all I did was change the transitions, and

be like yes, praise me for my work.

Because that's how offices work anyways.

At the same time, or I guess yeah at the same time more complex EASING needs to be,

Needs a little more time to be readable.

You might have noticed this if you were watching super, super closely.

When we changed the easing from like a straight up ease out to the thing, or

to the thing, to the easing that actually overshot its destination and went back,

I didn't change the duration, but it kind of felt like it was happening faster,

cuz there was more to read in the same amount of time.

I have a really awesome purple box that will also demonstrate this.

You're like okay, cool, whatever its getting wider on ease out,

pretty exciting, I'm so impressed.

Then we can go in and change this one thing about this, and

that would be the easing and just change it from ease out to a fancy cubic bezier,

that is actually the equivalent of a bounce transition.

And then once we finish saving that, and looking at it again,

It seems to happen a lot faster, but we didn't change the duration at all.

There's just more of that little bounce thing you do to read.

And if kept speeding this up a lot, we'd kind of lose that bounce bit, and

it would just look broken.

So, there's a balance between easing you choose and duration you choose.

Changing one kind of affects the other.

And this seems one of the reasons why timing is an art not like a,

no, you cant just pick one number and be like always,

always, always make your duration .15 or whatever.

because there's gonna be cases where that's not always true, and

we need to be like actual designers about it, and think about it and

kind of look at the over all picture, as opposeD to just looking at the numbers.

A shorter way of saying that, is prototype a craft out of everything you make.

The easiest way to tell if an animation you're creating is useful, or

if it feels right to use is to use it.

And that makes it especially awesome that we have tools like CodePen or whatever,

and we can just like hop into code, make like a crazy big box version of what we

wanna make, and be like, does this feel like something I wanna use?

Does this feel like it's responding to me?

Does it look like it has the energy and message that I want it to have?

Is it excited enough for a cat cafe?

That kind of thing.

Important questions to ask yourself.

I hope you all work for cat cafes.

It's yeah, you know, cats, they're awesome.

One other thing that is changed recently that made this all so much easier for

us, is we have gotten so

much better tools to do this with web animations in the last few months.

Like literally in the last six months, maybe not even that long,

our entire worlds have changed.

In March I was working on this project, and it was a super aftereffectsy project,

which means I was working in aftereffects, cuz aftereffectsy is not a word but

I just made it one.

And I was working with like a visual timeline and like the graph editor.

I could like move little handles around visually to change the easing and

it was beautiful and amazing and I was super excited and happy.

And then I was also really angry because we don't get to have that on the web.

And why can't we have that on the web?

And why can't we have that on the web?

Why does the CSS get that?

This might be another reason why I work by myself, anyways.

So, it's like, why dont we have these tools?

Then it's like wait self, because I talk to myself,

when I work by myself, in my office.

We do have these tools, we are totally getting these same kind of tools.

In Chrome, Chrome proper, even, not Chrome Canary, actual proper Chrome,

we can pause play and slow down all of our CSS and web API animations.

This is seriously awesome.

This one little line,

this one little draggy thing in the play-pause is like I shouldn't,

probably shouldn't admit how many hours of my life it is that I want back.

Because of it, it saves me so much time, like when we're doing things like

testing out whether all of the motion we want is there and if our animations

are all timed correctly instead of going in and changing every single duration.

We can just slow it down here.

Hours saved.

Perfect.

And this works on anything that is CSS animation or Web API animation, it

doesn't work on JavaScript animation, but you've got the console so, deal with it.

You get error messages.

Firefox has a really similar thing in case you thought I didn't like Firefox or

you hate Chrome.

They kind of split things out you get a play and pause for

each individual animation, and it's pretty awesome.

You can do the same thing, pause and play them, and scrub them.

Super, super, super helpful.

You can do more than just flip the Firefox logo, but I sort of like this video.

I'm like, ooh, look at it flip around!

He's so cute.

One better than that is in Chrome Canary.

If you hover over any of your easing functions,

whether that's a keyboard like ease out or some keyboard number you made up yourself,

you get this nice little modal thing.

This shows you the easing curve you've used and

an onion skin version of like kinda frame by frame of what happened and

you can edit it or you can just pick some other ones.

You're like, hey, maybe you wanna try this curve.

What would that look like?

So you can actually test out your different easing and see if you're getting

the energy you want or a different energy or a different field to it.

Write in dev tools.

Just click on a bunch of different ones.

And kinda, you can even sort of page through them, pick one you like, copy,

paste and done, hours of your life just saved there too.

And if you are wondering where this is all going, like why do they even,

why are they putting this in browsers, what do they care?

Basically where they are going with this, animation timeline, and

Firefox is working on something similar, but I couldn't find a video of that.

Where this basically is giving us, in layers, all the animations happening on

the page and little curves to show us the easing their using.

Plus, little lines to show us the duration.

It's pretty amazing.

It's like we have, finally, this visual control,

this visual indication of this stuff we sort of had no idea of before.

This one is kind of like pre-Chrome Canary,

they're showing it off a whole bunch but it hasn't quite showed up yet.

So we cant really use it yet.

Unless were super sneaky about it.

But it's like, this is so amazing, this is where it's going and these tools are so

much better than what we've had before.

Because up until this sort of point, if we're working with CSS animation,

and we like make an animation that is broken, we make a mistake.

We would never get error messages, that's silly.

Browser sees CSS that doesn't just it doesnt understand, it just ignores it.

So, if you made a mistake you would just see nothing,

and then you're like, well did I make a mistake?

Did I animate something off screen?

Did I just type something wrong?

And you would have no idea unless you just went and

spent hours of arbitrarily changing things or built your own debugging tools.

Both of those options suck.

These are so much better and I'm super excited to see these happening.

Makes our job so much easier and makes this so

much more of, just much more of an easier thing to use and easier thing to do.

So, to kinda continue on from the whole idea of like what you guys should do, or

what you want to do to make better design decisions when it comes to animation.

If there's more to it than just like getting the illusions of life, or

memorizing all 12 principles in the tumbler.

You can watch the tumbler a bunch, it's pretty fun, I like that one.

You wanna look into, you wanna look at other mediums that have been using

animation a ton and for like ages.

There's more than just the Disney folks.

They've probably been doing it the longest,

but other industries have used it as well.

Stuff like art of a title is a whole site dedicated to title animation,

and it's one of my favorite sites on the entire Internet.

Interestingly enough, if you read some of the stories behind these title animations,

the designers behind them start saying things like, we picked the typeface first

and went from there and wanted to have motion to match the mood of our typeface.

And they're talking about dealing with creating, communicating with type and

motion, and you're like I make typefaces and communicate with type and stuff too.

This is awesome.

So it's fairly similar workflow to the way we work on the web and it's just really,

really great stuff.

A little bit different than proper traditional animation, but

a really interesting read and some really fun things.

UI animation has existed in native mobile apps for forever and ever.

I mean we kind of always have to deal with the web being compared to mobile apps.

Right?

Like it doesn't do what mobile apps can do stuff that you can't do.

Blah.

That happens in meetings.

Right? Just a bunch of blah.

Anyways, [LAUGH] so we can actually kinda borrow somethings from them.

Captivate.com is one of my favorite gallery sites for looking at Native app,

UI animations.

Mostly, because kind of group things together, like instead of just showing you

one screenshot from the Flickr app they will show you like, three or four.

So, you can get, kind of an idea of the full system of animation and

how it fits in to the overall design.

And take a look at this sort of stuff, and

think about it of like what is this trying to say, what is it trying to help with?

Is it something I would want in my product or my app or my site?

And those judgments are really the more important part.

It's not just like imitate this stuff we can do in mobile apps.

It's like why?

Do I really want that?

Can I make it better?

Sometimes I think we can make the web better.

And go back and watch lots of cartoons.

Seriously.

[LAUGH] Gemma's on Netflix in case, if you're wondering.

Share is not yet.

Anyways, go back and watch these things with,

once you've read through the 12 principles of animation, whatever else.

Once you've started to pay more attention to these, kinda go back and

watch these cartoons that you have watched as a kid and

you can see how some of this stuff worked.

And I mean some of it is terrible,

low budget animation, but you can you can get the idea of just like

what they were like what they were trying to do and how they were doing it.

It's kind of an interesting way to go back and

relive your childhood, I think anyways.

But most of all,

remember that we are at the very beginning of the web animation, I guess like era?

I don't know. It needs a fancy name.

But things like CSS animation and

proper web animation that wasn't done with Flash and that isn't done with a plug-in,

it's like it's only been around for a few years, really.

And it's getting better and better.

We're getting better tools like I was showing you.

We're getting better support.

We can do more and more.

And there's kinda like this whole open space of all this stuff we can design and

make with this.

I'm excited to see what happens and

I hope you guys are too because I think there's some really,

really interesting times ahead on the web because of all this stuff.

So in case you wanna learn more about it, I've made a page for

you guys at bellhead.com/january2015.

Hopefully it will be easy to remember because that's where we are.

And I've listed some other resources you might wanna look into.

Some places to learn more about web animation,

to learn about traditional animation.

Some books, and some sites, and some articles for learning about this stuff.

Because it's, I don't know, I love reading about it endlessly and

hopefully you will too.

So thanks a lot guys.

[APPLAUSE]