Name: Animations — Learning from Cartoons by Martin Sonnenholzer | JSConf EU 2019
Uploaded: 2020-03-28T16:05:33.000Z
Duration: 18 min 9 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

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

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

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

I organize a conference based around Angular.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 you can use squash and stretch to give objects weight and a feeling of speed.

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.

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

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

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

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

Subtitles ListPlay Video

Animations — Learning from Cartoons by Martin Sonnenholzer | JSConf EU 2019

material

stretch

slightly

technique