 Can everyone hear me? Yeah, awesome. Hello, everyone. My name is Kaya. I work at ThoughtWorks as a senior consultant developer. And today I'm going to talk about animation in DOM, aka web animation. So we will talk about some development tools and techniques around animation. We'll also talk about some design patterns around how to design a good animation. But before I jump into any of those things, I want to talk about, first of all, why I want to explain about the animation at all. I am not an animator by trade or anything. But basically, I've always been fascinated by animation, how those clever little techniques around animation can actually bring illusion to life on any medium that we are using it. So I think we should embrace animation in Web 2 because it's not just a look and feel thing. It actually can have a real purpose. But unfortunately, that's always not a popular opinion every client I go. So people think that, OK, if you have a lot of animation on a website, you would end up with something like this. Yeah, 90s and 2000 time where we used to have a lot of overuse of GIFs or GIFs, whatever it is. And everywhere, like annoying parallax animations and those things. So it could. But fortunately, we moved from 90s and 2000. And we had whole iPhone launch happen. And then iPhone change our life. We had a whole UX movement going on. And nowadays, we're actually seeing a lot more clever use of animations. Example, this one, it's a very popular example of how good animation looks like. This is a striped checkout. We must have used it at one point or another. As you can see, if you look at closely, there are a lot of animations happening here. So pretty much every element on this particular form is animated in some way or another. What's the difference here? The difference is not the number of animation that you're doing. The difference is actually that every animation in here has some purpose. Like good UI design, good animation are also invisible. So that's the difference here. So in the next section, we'll talk about some good design patterns around animation. So we'll try to find out, identify places in a web that we can actually use animation that would add purpose to what we are doing and improve the user experience. So if you look at the web closely with a lot of website, you start seeing some patterns. These patterns are actually very helpful in identifying where we can actually use animation. So we'll look at some very common one that we are seeing today a lot. The first one is the navigational transition or general transitional animations, like your carousel here. Or you can have page transitions, which is also a kind of transitional animation. You cannot have an animation here. That's fine. It will work perfectly. The difference is if you don't have an animation here, that means it's the user who has to now work it out that if I want to go right or if I want to go left for going next or previous. So it adds an extra cognitive load in your brain. And we can use animation to actually reduce that cognitive load up for user. So that's transitional animation. The next ones are supplemental. Supplemental animation. So transition takes you from one place to another on an information space. Or they take you out from one task to another. Supplemental animation doesn't take you anywhere. What they do is they basically adds information to a page or removes the information to a page. So all our dropdown boxes, our pop-up, even the unknowing ad block, they all actually kind of supplemental animation. They add information to the page ad-hocly. Then you have a visual feedback. This is another very, very common use case of animation. Animation can be used to give direct feedback to a user's interaction. So like your depress button, or even like a loading animation, like a preloader that you are using. That is also a feedback animation that can actually give you, give a user a feedback that system is busy doing something, wait for it. So that's also feedback. And we are using animation for that nowadays. And the next one is demonstration, or visual hint. This is where it's like playing begins, because you can play with a lot of things here. So demonstrations are the one which can actually use animation to tell a story. You can have a really big blob of text around what your product is doing something, or how your product works. But instead of that, you can actually use an interactive animation to tell a story in a very insightful as well as entertaining way. So that's demonstration or visual hint kind of animation. Then we have, the last one is pretty decorative animation. So these animations are there for no reason. They're there just for fun. And obviously, we should be very mindful of using this kind of animation. We can't have a lot of animation which doesn't have a purpose. But in saying that, decorative animation can have their purpose as well. Decorative animation can be used to enforce branding, or it could use to sometimes make something ordinary into extraordinary. So that's decorative animation. These are some very common, but obviously, there are a lot more patterns if you start seeing the web where we can use animation. So identifying where to use animation is only half of the story. In order to basically make a good animation, it takes the whole team. So that's why a designer can come up with an amazing animation design. But at the end of the day, you need to develop and put it in a production. So I think the communication aspect of animation is as important. As a developer, why should I care about animation at all, like communicating animation? Because if you know what goes into designing it, you can ask right questions at the right time. Rather than someone deliver your animation and just make it like this PSD, it doesn't work. So that's why when we are communicating or defining an animation, there are certain things we should keep in mind. Let's say if you want to define an animation there are three things you should be at least asking. The first and obvious one is a trigger, obviously. But what starts it? Is it actually happened on a page load? Does it happen pick of button? So obviously that's the definition. That one is actual action. Obvious one again, like what happens? Like when something fades, something moves. Just in a description of what the action is. And the last one, which is a quality. This is often forgotten, but it's very important to get the qualities right. Because the right quality is answered. It can actually create really smooth, lifelike animation. So these are all actually the quality to actually find out how good animation is. Let's look a little bit more about qualities. So what are the qualities that you should be asking design is about? So obviously there are a lot more, but I don't know. First and most important one is easing. So easing, we don't ask that. So easing is basically a rate of change that something changes over the time. In your CSS world, it's a timing functions. Every browser understands four type of easing. Ease in, accelerate, eased out, decelerate, decelerate later, and linear, which is no rate of change. So every browser understand these four and you should be asking which one I should be using. I see the animation, have you eased in or eased out at the end. There is a fifth one called custom easing as well that you can define by a cubic bezier which is a mathematical formula you can play around with. So there's a website called cubicbezier.com which can allow you to play with the different kind of thing. But usually in my work, what I've seen it, mainly the four standard ones will suffice. So that's easing, important one. The next one is obvious one is the duration. How long the animation lasts? It will be asked like, okay, it's a two second. It's a one second depending on the frame rate restrictions. And the last one is the properties which is which CSS properties are getting animated. So you can have like any pretty much CSS property written here, but the note on this one is not all the CSS properties are animatable and the ones which are animatable, not all of them are as performant on every browser. So you should be very careful of what properties you are actually animating. Most of the time, your safe bet are four properties. Opacity, translate, scale and rotate. So the last one are all done through transform. So if you most of like work, you can 80% of the animation we are doing, we can do it with this four thing. And we should be considering them over anything else. So that's the talk about communicating animation and designing animation and all those things. Now let's get into a nitty gritty of how to develop a good animation. So with the development, it's a really good time to be around like, I mean, there are so many options available to develop really good animations. We start with first, let's say, what's available natively. So one obvious one is CSS. We must have used it at one point or another CSS animation. There are three ways to animate in CSS. Animation, transition and request animation frame. They're your go-to kind of place. It will work on every browser. You don't need any third party library. They are very easy to use. They are really hardware accelerated. So it's like, if you can do it with the CSS, you should do it with the CSS. The downside of it, it's actually, as soon as your animation gets complex, it's really hard to maintain. You can't do motion along the path or chaining a different animation or staggering very easily in CSS. It's extremely hard. So that's the downside. There are other native option available, like Canvas. I mean, Canvas can do amazing things. Canvas Ninjas out there, they've done an amazing thing with Canvas. But there are downside of Canvas as well. It's not responsive and it's not accessible as well. So when you're considering your production-ready website, you need to make it responsive, well, Canvas may not be a choice all the time. The other one is WebGL, which is again like you can do a lot of 3D related cool stuff with WebGL. The problem with WebGL also is underneath it uses Canvas. So it's the same limitation. You actually can't make it that accessible as well as responsive. So that's the natively available. Obviously we have a third option available for third party. So we'll look at some of them. The first and most obvious one is a green sock. GSEP, Tween Max, Tween Lite, all of the same name. Green sock is like a defect or standard library for any animation that you want to do. Like it's been there for a while, like it's 10 years or something like it's been development and it's kind of like anything that you want to do on animation, you can do it with green sock. It's got that many plugins available. It's very performant at the same time, like easy to use, very easy to use. The only downside, it's an external dependency. The licensing model is a bit funny, so you need to know which license you are using. But it's a third party library, it's a dependency on your project. You have another option like Velocity.js, which is kind of like green sock with less bells and whistles. Then you have MoJS, 3JS very good for 3D animation, and they're huge number. They're React specific one, like React CSS transition group, there's a React motion, a lot of them available. But they all have like their plus and minuses. CSS is very performant, easy to use, not great for complex animation. At the same time, you have green sock, which does everything, but it's an external dependency. But there is a new upcoming API or a spec that W3C has been working on for some time, and it's called web animation API, called WAPI. And the premise for that, it is like you'll be able to create and very easily a complex animation in native JavaScript, without any third party library, and which gives you a same power of CSS, same hardware accelerated way. So that's the idea behind WAPI. So the biggest question is can we use it? Like I mean, if it's amazing, why can't we use it? Are we ready to use it? Well, WAPI is relatively new. I'll say relatively because it's like if the first draft came out in 2012. But as you can see, the browsers are not very easy to catch on with that. So right now we have a Firefox and Chrome pretty much implemented most of the major feature. But at the same time, IE Edge and Safari are still in development. So what's the deal here? Well, the good news is WAPI comes with very comprehensive and very reliable polyfill. So with that polyfill, we can actually start using it, at least play around with it. Or if you want, like in a control environment, you can use it in a production as well. So that's the thing. I mean, the first question would come like, yeah, but with polyfill, why should I care about WAPI? So the thing is like when, even though browsers right now, like from the browser side of thing, it looks like very bleak situation that they are not catching up very fast. The thing is when it will be available fully supported by all the browsers, this will be the fastest and most sharpest way to actually write an animation in native JavaScript without resorting to something like WebGL. So it's definitely worth looking into it right now or playing around with it. And it's so easy to start. So in the next brief section, I'll look into like few basic APIs that we can actually get started using straight away. The first one is called element.animate. So if you have one element and you want to animate that or do anything like any small animation with it, you can actually call an animate method on that element and then you pass the keyframes and you pass the options. Keyframes are your simple CSS keyframes, like your solutions are your qualities, like your ease in all your iterations, all your durations and stuff like that. So you can pass this and that's it. That's all you need. So let's look at the example here. So for my example, I'll be using React. No specific reason, it's just like React right now is probably one of the most widely used framework for front-end application and at least it dominates my world, so there it is. So I have a React component here. It's a simple div and I just want to animate it, like rotate it. So basically all I am doing here is in my component did mount, I have timing which are options. I have a keyframe and I'm getting the element by reference and I'm calling the dot animate method passing the keyframe and timing and that's all I need. So it's a simple example of how easy you can get it started. The next one is a keyframe effect. So it's exactly like element dot animate. If you want to animate a single element, you can call a new keyframe effect rather than element dot animate and you pass that element as a first parameter. So that's the only difference. It'll give you the exact same effect. Once you have the keyframe effect, then you create a new animation object and you pass that keyframe effect with the timeline, your animation timeline that you want this animation to play on. Now it's the same thing, what's the difference? So there's a big difference here. Vapi is not just a replacement for CSS animation, it can actually give us a lot more. Now that we have new animation, every time you do new animation, it actually creates an instance of an animation player. And that animation player, you can now store it in a variable. What you can do with it is now you can call a different methods on it. Like you can start, you can stop, you can reverse, you can cancel, there are a lot of other callback properties that you can call as well on top of that. So now it's like your video, you have an interactive animation and you go and click something, it stops or something like that. So it's actually a lot more than, you can't do that easily in CSS. This is a power of Vapi. So we look at the one of the example of this different kind of state. If I can find my mouse. Okay, so I have an animation here. It's a continuous animation. All I'm doing is just animating a div. And I have a button here, I click on it and it just pauses. Click on it, it starts again. This is a simple example. So again, what I've done here is I have a div and on my component did mount, I have this animation defined. So I have a new effect, keyframe effect. Then I have a new player. I'm creating a new animation, passing that effect with the current timeline. And I'm just saying player.play and it'll start playing the animation. When someone clicks on a button, on a handle click, all I'm doing is if it is just toggling the state. So either play, if it's playing, just stop playing or play a pause. So it's that simple to manipulate the state of an animation. So that's an example. Now, so these are all the basic ones that are available straight away on level one. There's a lot more. WAPI is a pretty comprehensive spec and there's a lot more you can do with it. But with just these two APIs, you can do a lot more as well. There are a couple of other node toward the APIs that are coming in level two. First one is a group effect, which is worth noting here. So you can still use it today if you want. The only thing is you need an other polyfill for that which's called polyfill next. And it's still under developer, it's experimental. So it may break at some time. So you can use it, you can start playing with it. It's no problem with that. The group effect is exactly like a keyframe effect. The only difference is it takes another array of keyframe effect. So what you can do is like when you say animation.play, all those animation, all those keyframe effect will start playing at the same time. So it's like you can actually play a lot of animation at the same time. And the similar one, next one is a sequence effect. It's exactly like group effect, but instead of playing all at once, it's gonna play it in sequence. So now like you can do a lot more with that. So you can sometime a lot of like a timeline happening of the animation, you have one animation here and then it stops and it starts another. You don't need to chain them manually. You can do it all in one shot. So that's a sequence effect. So we spoke about like a very basic example of Vapi and APIs. In the next brief section, I'll talk about like some real world like examples that I've created. Just how easy it is to actually use it just with element.animate. So first one I have is a button here. So it's like a feedback button. So you click on this and instead of having a loading spinner, it actually has its own loading bar and then once it's finished, it shows success. So how would the code look like this? So as you can see, there are four things. First one, when I click the button, the button resize it to smaller. Then loading bar animation shows. Then it goes back up, third animation and then success comes in. So that's four animation here. They're happening one by one. So I'm not using sequence effect. I'll just show you how it is done without that as well right now with just element.animate. So what I've done is like I have four different keyframes. So four different animation. And then on a handle click, all I'm doing is I'm playing the first animation. Then on finish of that animation, I'm just changing the animation. So this is on finish. So you have a call back call on finish as well, which then you can use to chain animations and change the states in between. So it's as simple as that. So next one is a loading animation. So it's like just if you have two balls just rotating is showing that something is in progress. As you can see, there are two animations happening here. First one is like a blue ball or something and it goes into direction. The other animation, the second ball is exactly the same just in a reverse direction. So yep, so it'll be, the code would be simple. Again, like it's the keyframe and another frame and all I'm doing is element don't animate. The only difference here is the direction of a second ball is actually in reverse, that's it. Everything else is same for both. So yep, and last one is I have a transition animation here. So you can have a master page kind of like a requirement and you can create something like that. So as you can see on click of it, actually it rotates the whole page or rotates in based on what the state is and then it rotates a button itself in between as well. So the code would be very simple for that as well. So two animations are happening on a handle click. I'm just gonna based on the state either rotate in or rotate out the animation. And then on finish of that, I will just rotate the button as well, the green button a little bit. So again, that's another simple, very simple example of that. So with that, I will wrap up, giving you a few references to start, like start looking at Mozilla developer documentation is very comprehensive to start with. And these are all few people that I like to follow. Rachel Nebbo, they're all either involved in WAPI spec in some way or another or some people are really good at like writing about animation, like animation at work, book by Rachel Nebbo's. Rachel Nebbo also wrote a documentation on Mozilla developer. So these are all like people you can start following. There's a lot of discussions around WAPI in nowadays in the web as well. So with that, I'll finish it off. Like I'll just, I'm really excited about like a day where I really don't have to use any third party library and native JavaScript can give you an as easy way to write a really complex animation. So I hope I've actually inspired some people to start using WAPI or at least animation in our day to day work. Thanks everyone for listening. Thank you. And we have a couple of minutes for questions. So if anyone has a question for K.R. now, we have time to share it. So it's not promoted by all of the browsers. So would we actually have to use Polyfill or is there any compatibility? So no, they come with a very comprehensive Polyfill. So there are two levels of Polyfill. So the first Polyfill, you can actually start using it, which are using it on the like this, this, all these, the animation example I've shown is actually I've developed on the website and it works on pretty much all the browsers. So with the Polyfill is actually very stable in a way that they, if they make any breaking changes, they make sure that they have the backward compatibility and they make sure that it's available for three months at least. So you get the console error, but you have three months to fix it as well. So I mean, it's very comprehensive and reliable, yeah. So underlined it actually with the Polyfill, if the browser doesn't support, it actually turns into a CSS. So yes, it is exactly like CSS, but it's just in CSS, if the same thing you want to do, you will be writing like a huge code. Like browser seems to be writing by itself. If you're having a performance in CSS, you will have performance here, but because it's exactly the same hardware accelerator. Sorry, yeah, so at the end of the day, it actually turns out like it uses the same way the CSS is actually using the GPU. So all the third party library won't be able to use the GPU, CSS uses this, that's why they are most performant. This is exactly the same thing. So that's the reason why when it's available, this will be the most performant way. But yeah, you still have to be careful on what properties you're animating. You could actually get, depends on like if you're doing a huge animation of a page, which repaints the whole page, like a color changes, yeah, it won't be expensive. So yeah. Thank you.