So many people.

Did you see Jessica's talk about comics?

Did you like it?

Yeah.

I like comics as well.

And a lot of cartoons.

They are company for me for almost my entire life.

When I was a kid, I was sitting at the TV every Sunday morning and watching cartoons

for hours.

My parents didn't like it, but I loved the cartoons.

Later on, when I went to school, I started drawing little characters in my math books

in the corner.

And every time you flip the page your characters came to life.

It was really amazing.

So, my name is Martin.

I'm a principal project engineer.

I organize a conference based around Angular.

I later on used my math books for the original purpose and studied math.

I love math and the possibilities.

I and love cats.

That's probably the reason why all over the Internet my cat's face is my avatar for Twitter,

GitHub, everything.

And my cat's nickname, Chaos Monster became my Twitter handle.

If you see a cat like this, it's probably me.

I started as a backend developer.

And at some time in the last ten years I switched to the frontend and became a JavaScript developer.

I did that because I was passionate about the UX possibilities that you can have.

All the user interaction is most possible in the browser when AngularJS 1.0.7 came out

years ago.

And I was like, yes!

I want to do everything in the browser because I want to be close to the user.

I want to have interaction with them.

But I was really, really afraid of animations.

Every time my product owner came to me and said something like, hey, can you move that

from the left to the right?

I was like, don't you think it would be better if it suddenly pops up on the right side of

the screen!

It's way better, it's way better and I don't have to do animations.

The time passed by and I watched documentation by Studio Ghibli, creating the moving castle.

And this was about how they made walking animations a smooth and natural experience for everyone.

And I was like, all the time I learned from different domains from other professions.

Why don't I look at cartoons and can see what I can learn about animations from watching

cartoons and learning how they do it?

So, if you do a little bit of research in field, you are not able to get around this

book, called the illusion of life.

It's by Frank Thomas and Ollie Johnson.

Both are animators at Disney.

And in the '80s when they released that book, they boiled down all the knowledge that Disney

acquired in the last not 50 decades five decades.

They did the amazing animation movies to 12 principles of animation.

And I thought to myself, after read them, they are really amazing.

I have a lot that I learned from that and boiled it down to the eight principles of

web animation.

Starting with squash and stretch.

If you think about a ball, a tennis ball, for example.

And if you think how a tennis ball would behave if you throw it on the floor and how it would

bounce back into the air.

You think about it, it wouldn't really change its form, its shape.

It would look something like this.

But that doesn't feel really good.

Because you can't feel the speed of the ball.

You can't feel the impact of the ball on the floor and you can't feel how the ball falls

jumps back into the air.

So, what you can do instead is doing stretch and squash.

You use stretch to show speed.

To show how the ball gets accelerated.

And you use squash to show how the ball gets pulled and pushed into the floor.

And how the energy goes back into speed afterwards.

And you cannot only use that to create a ball that bounces off a floor, but you can also

use it to create a feeling for material.

This box that is created with key frames in CSS feels really squashy.

It feels like bouncy.

It gets adjectives.

It's not just a box.

So, you have to keep a few things in mind when you do that.

For example, you have to think about the volume.

The volume of the object should not change because your brain recognizes if you're just

changing the volume of the object by squashing or stretching it.

And it feels really off if you do that.

And you can use squash and stretch to give objects weight and a feeling of speed.

And also, to give them material.

The feeling on how the material works.

The second principle is anticipation.

If you look at this stick figure, you would think, okay, what happens next?

You would not expect it to just fly off in the air like this.

It doesn't feel right, right?

What you actually want to do is you want it to bend the knees and then go up.

Because with that, you give the view of this animation, the feeling that something will

happen.

The user can anticipate what happens next.

If I'm going down and I'm jumping up, you will expect me to jump up because you've seen

me going to the floor and you expect something to happen here.

And you can use the same in the browser when you do some animations before you do a bigger

animation.

Before you show that you can drag and drop it.

Also, really important what I did not do here, but what can be really important for anticipation

is the timing.

So, if you slowly start winding up before you do a really fast throw of a ball, this

is also important.

Not only the winding up.

But also, the speed of how I do it.

The third principle is staging.

Frank and Ollie talked said it's like that.

If you have a presentation of an idea, it should be completely and unmistakably clear

what you want to do.

Don't irritate your user or viewer by pointing them in a certain direction and then doing

something totally different.

Look at the stage and all those arrows.

I focus you on one point of the screen.

Doesn't have to be the center of the screen but focus your view on one point of the screen

and you expect something to happen here like a character appearing like a magician.

And use that technique wherever you do it.

If it's on the left or on the right, just use it to make it clear for the user where

something will appear, or something will happen.

The same goes for when we are in the western culture.

We expect something that comes from the left to the right to appear on stage.

If it goes from the center to the right, we think it disappears from stage and you would

drop it down to the bottom of the stage.

You think it will never come back.

Keep those things in mind because they are part of staging.

When you look at this green diff.

And I want you to focus on that diff.

Now I told you to focus on the diff.

Imagine you're a user and you're in a browser and I want you as a developer to focus on

the diff.

What I can do is I can make the background opaque and do a little bit of animation to

focus on the green diff.

Maybe it's a greet button.

Maybe I want you to save that form because otherwise all your data will be gone.

Number four.

I have a little bit of a problem with that because in animation this is a really, really

important thing to do.

But I wasn't sure how to translate it to the web browser.

Let's go a little bit back.

If you have a motion in a movie or an anime, you have a lot of pictures and those pictures

slightly change from frame to frame.

Normally we talk about 12 to 24 frames per second.

If you're a gamer, you want to run on 60 frames per second.

Meaning you want to have so many images that slightly differentiate to each other in each

second.

And back in the days, in the 1980s and before that, before this was a thing, all of those

frames, all of those images, had to be drawn by hand.

So, people were sitting there and drawing the same image over and over again and just

slightly make a change to the previous one.

And here comes the technique of straight ahead.

If you just change the image just slightly without any concept or any story about it,

you just create something that is randomly moving like fire or rain or explosions.

This is a really great technique to do that.

But if you want to tell a story, you need a concept, a story board behind that.

And for that you think about, what is my first pose?

And then you think about will be my last pose?

And you think about, what poses are in between those two poses that are important for me

to show my audience?

So, the audience gets an understanding of the movement we want to have.

And then you create those key frames and afterwards you just add more and more frames by using

the straight-ahead technique.

And then at the end you have a movement.

And with CSS we have CSS Transform, we have scale, rotate, you name it.

And we also have CSS keyframes.

And this is where my mind just popped.

I have those poses.

Those are key frames.

They are frames that are really important for how the animation would work.

Same goes for web animation API.

And if you look at keyframes, and this is no change to how web animations work with

the web animation API, you create your initial pose you create your final pose, and if you

want to, you create a few poses in between that are important to tell the story of how

your object moves and then you let the browser just fill in all the other thousands of frames

that you might want to have.

The fifth principle of animation frames is overlapping action.

If I have the pod and tell you I'm moving from the right to the left.

You would imagine the flower pod to move and you would imagine the flower to move.

Follow through and overlapping means that you can drag secondary animations like the

flower.

Because the flower takes a little bit longer than the flowerpot until it realizes that

something is moving.

And it takes a little bit longer to that's just physics to realize that it stopped.

And this is called follow through and overlapping action.

And if you look at the browser, I found this great article.

Get the slides afterwards and I highly recommend to read that article.

That mentions how to fix drag and drop by using a little bit of math.

You see why I was into that article.

And what they do is they use the mouse movement speed and translate it into the tilde of the

dragged object.

The faster the mouse moves, the higher the angle of the object, the tildes.

And if the mouse moves slowly, the tilde goes back to a horizontal stage.

And this makes all your drag and drop animations feel way more natural.

Way more like I want to drag and drop everything here because it's awesome.

Slow in and slow out.

I read that principle and I was like, yes.

I totally understand it.

I know how this will work in the browser.

Just for you to present how it works, slow in and slow out means if I'm starting running

over there, I won't start with full speed.

And if I'm stopping at end of the stage, I won't stop at full speed.

I will slow down.

This is a natural movement.

I will show it to you just for the sake that you see it.

[ Laughter ] I'm walking very fast.

I'm slowing down.

And back.

I start fast, slowing down.

Yeah.

I did my sport for today.

[ Applause ] I would never imagine that someone claps when

I'm running.

And we have the same thing in the browser.

We call them easing functions.

We call them busy functions.

If you have an ease in and ease out function on your animation, it comes to it at a faster

speed and slows down before it's at its final stage.

And if you do a linear transformation, it will have the same speed from the beginning

until the end.

And this feels really mechanical.

Not natural like in and out.

And mechanical is something that we really don't have that often.

Even a car that is mechanical would slowly start.

Only things like bullets would be really fast from the beginning.

Secondary actions.

This is about how your main action, your main animation, needs sometimes support so you

can tell a story.

And for that you need a concept.

And, for example, if I'm walking over that side of the stage, my arms are really stiff.

And I'm walking and you see the walking animation.

Imagine animation.

And it feels really stiff and really unnatural.

So, what I actually do when I walk and probably all of you if you're walking, you move your

upper body.

You move your arms.

Okay.

I'm a little over accelerating now.

But you move your body with that.

And the movement of the arms and the shoulders are the secondary action and they support

the main animation, meaning the walking animation.

I found this really, really, really awesome CSS animation by Andrew Wong.

And I don't want you to focus on the walking animation.

I want you to focus on the secondary animations here.

Meaning the clouds in the back, the signs inform back.

They are secondary animations that help to give the animation depth.

That help to give your relation to how fast this object is moving.

And this helps you to understand the main animation.

So, secondary animations are really, really good when it comes to how to improve your