Placeholder Image

字幕表 動画を再生する

  • Whoa.

  • 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