 Today's topic is linear animation, and hi everyone, my name is Zhao Jinjiang, and this is my Chinese name. I also have English name and another Chinese nickname called Gou Sen Gu Si, and this is my GitHub ID, Twitter ID, and the email address. So that's self-instruction. And today, so back to today's topic, the topic is named lean animation. You may ask, what does this word lean mean? Just because I read several books called lean blah blah blah, it's all kind of, all kind of book who tell you something easy to understand, easy to remember, and easy to practice. So I really love this word lean. So today's topic is just some lean way to do something. And another word is just animation. So what does animation mean? Animation just means animation. But today we are talking just as a right, so the animation just means some kind of animation could be implemented in CSS, maybe CSS animation or transition. And the goal is, I want to help all of you to simply try animation into your product or design system, because I found sometimes we love animations. We want to create some creative animation effects, but it always costs too much time. But when you create some product doing your job or building some project, the time is always limited. So a lot of friends of mine just spend some time off work to try different animations. But how to use these animations reasonably and with less cost in your real product or your job, maybe the lean way to create animation could help you. And let's go to question number one, why we need animations. I think that's some reasons or some user requirement, just like there is something really important on your screen. So we need animation to track users' eyes. And also something has changed or something could or should change that people maybe couldn't notice. So the animation could help you doing this kind of job. And also at the last, maybe just for fun or for art or just show yourself skillful enough to making some animations. Honestly, maybe this part of our lives, so also a requirement. And there are fun animations, there are some common scenario I guess. Let's talk one by one. The first one is showing and adding something just like components or dialogues or pages. So the second one is called macro feedback. Just like when you hover on a button or click a button, you may find the button has some little bit change to tell you at the button you have clicked or have hovered on. So the first two is quite common, but the last two I think is also important. The second is emphasize. That means maybe there are some primary button or action point really important, but you want to make sure a user could pay attention to it. So maybe make some little animation to attract users' attention. And the last one is logic or regularity. I'll explain more details later. And next, when we got some common scenarios, the next thing is just find all these kind of scenarios in your product and choose, appropriately choose animations for each of them. That sounds simple, but maybe not just like this, how to draw a horse. You could easily do the step one to step four. But what happens, how to do is to make the final things happen. Maybe it seems simple, but really hard. So yeah, we should find some way to do the last steps. So how to choose or how to make this kind of animation effect is really important. So let's talk about how to choose animation effects first. My first advice, rule number one is just get some inspiration from the reality or real world because maybe your users are not familiar, unfamiliar with your product. But everyone have some real-life, real-world life experience. So we could get some inspiration from the real world and just apply this kind of animation effect to your product to help you better understand your product. And here I want to show a really special and particular case that animation effects from the real world. This is the video. It's a FBM 729 magnetic tape unit. So this machine is just rotating in different ways. Yes, and this is the real world things. So we just build this kind of animation effects in our UI for some loading spinner. And potentially tell users maybe nothing had happened, but the machine, your application is still working, physically working behind. So just be patient and wait. I think this case is really special and interesting. So that's one case, the animation effects from the real world. And also today we could also find more inspiration or design materials or some cases from the internet. You can just search and find a lot of design resource or materials. So that's another way really easy to help you. So rule number two, how to choose animation is just to fit the characteristic of your product or just fit the style of your product. I think that's really important because you could find all kinds of different animation effects, but what kind of animation is just fit your product. It's really important, you should think. For example, would you like your animation effects more soft or hard or more fast or slow or more or less? That's all really important to reflect your style or product and gives your user different feelings. Okay, so that's rule number two. So I will give you some demos today. So for today's demo, what I have chosen, I will show you first. This one is just showing and has just a slight left or right, it's just from the real world case, right? That's the first kind of animation effect. But I think just one kind of animation effect for showing or hiding things is not enough. So the second one is fitting and fade out. It's like day and dark in gradient. And the third one I choose, it's like a shape of your window, so you can roll up, roll down from the top. So it's also from the real world. So the three kinds of animation effects to show or hide things. And for emphasizing or macro feedback, I choose some kind of pop-up effect just like your pet or just like dog jumping on you to attract your attention, right? Okay. And the last one is bounce. Okay, so I will explain later as I mentioned before, just to show some logic or regularity. Okay. So here's the demo time, and this is, I can, okay, I'm not sure, okay. That's the demo I prepared for today's topic. And maybe the text is a little smaller, but I can, I could explain one by one. The first animation I want to show is depth navigation. For example, if I click this link to go to a deeper path of your application, it will slide from right to left. It will imply users, maybe there is some kind of depth of your different pages. If I continue to click next, maybe I go to a more deeper path, and then again, and also if we click previous button, previous button is from left to right. So it's a kind of logic or regularity to let the users potentially know the logic. So it's showing and hiding things in your application. So it's a first example. Second example is some layers. For example, if I click button, something happens at the same time. First thing is when I click the button, the button will pop up a little bit. So it gives you a macro feedback that you will click the button. The second thing is the whole screen will, there will be a gray mask on the whole screen. So try to hide something not important or not should be attention. And the third thing is just pop up a dialogue to track your attention to notice there is a dialogue you should care about. So when I click confirm or cancel, the gray mask will disappear, fade out. And the dialogue will drop down and back to the page. Same thing, similar things when you pop up action sheet, it will slide from bottom up and also when we choose one option, it will slide down. Also the filter or drop down select, when I click, it's just like a roll up. So it's some kind of layers. That's a second example. And now let's go to the next example. This one is more complex. So please watch carefully if I open the list. So this animation effect telling three independent things at the same time. The first thing is you should read the list from top to bottom. Because it appeared one by one from top to bottom. So it tells you the logic or the regularity. And the second thing is there is no more, there would be, might be more list items on the bottom, below it. So you could just scroll it down to find more information. And the third thing is it just tells you there is no more item above. Because it bounce to the top, just like hitting a wall. So no more content above. So that's the animation effect of this list. But we can check it out again. So here it is. And the last example is type bars. So just similar to list, but it's the horizontal effect. And there are two different type bars. The first one, there are only four options. So you could all display in the whole screen width. So there is no animation. You could find everything. But for the second one, you couldn't display all the options at the same time. So we use animation to tell users there is more. And you should read it from left to right. And there are no more tabs left side. So that's all. Yeah, here are four different examples to show animation effects. That's a demo. And after that, you may ask how to implement this kind of animations. And I found there are two different ways, common ways, to implement the animation effects with CSS. And one method is one way is just find some math formulas or physics formulas from the real world. If you find them, maybe you could just implement by CSS transition. You could just change the duration and timing function. That's the two most important properties to implement the animation effects through some formulas. And the second way is just simulating the animations by frame by frame. You could define some keyframes and find some way to record each keyframe from the real world and just code them down as a CSS animation keyframes. So that's the two common ways to implement animation effects. So it's time to show some code. I have prepared. And this is the source code of the demo. And the whole project is implemented based on Vue.js. But for any submission part, it's just framework agnostic. So just pure CSS code. So you could see the left side is all this animation effect written in CSS. The first part is just some formulas, physics formula or math formulas. For example, slide left, right, or fade in, fade out, or pop up, or drop down. Yeah. I think any of you would just love CSS. And you're often here with CSS transition and animation. So I won't go into the details, but I just show you how I just write all the CSS code together as some fundamental styles. And that's the first part. And the second part is keyframe just like the bounce top or bounce left. Maybe I should change the name to bounce inline or bounce block. But anyway, yeah. For these two animation effects, I just record every keyframe and code it up. So that's two different ways to implement CSS animations. You may be interested how to implement the animation effects on list one by one. Actually, it's a feature in Vue.js. So it has a building component named TransitionGroup. So we just find an event, a peer event, and find the index of the list item and just write a timeout. So it performs one by one, one after another. So it's a small trick. So that's so cool. And that's almost all of this topic. So some takeaways. When to the user requirement, something important or something has to change. The common scenario is just emphasizing macro feedback, show or has things or just some logic or regularity. And how to find appropriate animation effects just from the reality and at the same time fit the characteristics or style of your product. And the last thing is the way to implement just from formula or keyframes. So that's almost all of this. And the one for the reading, if you already practice these kind of animation effects well, you may challenge yourself to do more. I highly recommend this. It's the 12 principles of animation from Disney. Yeah, this great company summarized 12 different principles of animation. I think it's more helpful to build more brilliant, fascinating animation effects. So just for the reading for all of you. So yeah, I think it's done. That's my first public English speech. So, Zhong Yi Jiang, thanks. Any questions? The people are shy. So let's take a question break. So please make yourself available. And let's take a 10 minute break. So you can ask questions if you want to. And as promised, I have speakers here. So we'll come back in 10 minutes for our second interview. Sorry. So for those who are reading the single premise, so remember to return your-