 Yeah, I'm talking about transitional interfaces and CSS3 animations. It's pretty basic. It's how many of you are designers over here? How many designers do we have here? How many developers? So that's pretty cool. This talks for everyone. Designers, developers, random people. It's pretty general. So yeah, let's get on to the basics. What is a user interface? What exactly it is? I mean, when I'm designing a particular website, I go static. I mean, I design a particular state A of a page. I design a state B of a page, but something which is missing is how do I change that state A to state B? It just happens. It's like, I call it Buzzinga. It just happens. The state just changes up. This is where I introduce the area. It's already there in the talk. It's called transitional interface. So let me talk a bit more about this. We as designers, we pay more attention to aesthetics. We make pages visually very appealing. We use some really cool CSS to make things run. They look beautiful. They look pretty amazing. What happens if I do something like this? Say I have a list of items and I'm willing to add another item using a button. Let's just do this here. Now you see the button coming in. It's coming. Now I ask you this question. Where is it coming from? Is it the list element converting into Buzzinga? What is happening here? I mean, what exactly is happening here? Something is broken. Something is missing. I don't know what, but let's just do it again. I mean, it just adds up. There's nothing here. There was one state A which was minus the two new list elements. And we have state B, which is with the two list elements. There's nothing intermediate. This is what I call it is missing. What is it missing? Let's talk about that. Now when I'm designing a user interface, I put up a certain list of guidelines about that. I mean, this is all static. The ones I showed you with static, there's nothing in there. Now we add content to it. First of all, static user interfaces are bullshit. You don't make one page. You make another page. You don't link them between. It does not really make sense. And another talk about that is, there's more to animation than aesthetics. There is functionality. Let us use animations to add a little more functionality to it, rather than showing it off. I can do this cool stuff with animations. I can use the screen frame. You can take things there and everywhere. It doesn't work well with, say, older browsers, mobile browsers, etc. IPath, etc. doesn't work. So let's stick to the core functions. It's called functionality. This is the thing. This is the new dimension, which is missing in all the functions, in all interfaces that we make. I call it time. I mean, if a state is changing from A to B, something is missing. That's something it is called as. I call it time. It's like pretty simple. I mean, you have to give a user an idea that something is happening. We put a lot of thought in visual design, but we neglect this very important feature of a user interface design. It's time. I mean, you have to do something about that. Let's get into more details on this. So yeah. So how we make great interfaces? We use CSS3. We use animations. We use transitions. It's simple. How do we control them? We use the good old jQuery. UI is there. It's pretty simple. It's another concept. And there are several other libraries. I have like anime.css. We have complicated transitions. Everything can be done through D3.js. And there are several other libraries. There's Twitter Bootstrap, which takes care of this sometimes. Now, talking about animations, let's get into the theoretical sides. How many of you wonder what is linear, what is ease in if you have written animations? What is ease in? What is ease out? What is ease in and out? And what is ease, which is the default for animations? It's a default fallback. So let's get this started. See, I call this thing, this is a state A. The left part of it is state A. The right part of it is state B. I'll talk about simple concepts called acceleration. Now, when I have to change something from state A to state B, the ball here as such, it accelerates, deaccelerates. Something's going to happen. Now, this is linear. This is how a general computer works. There's a break point in there. That's the point when the acceleration and deacceleration changes. Let's just animate this. So if you noticed, the change point occurs in the center of the... The change point occurs in the center. It's right in the middle. This is where this thing changes. And for animations like ease in, okay, let's get back to linear. Linear is how your usual capping computer works. It's like infinitely small time, amount of time. It just changes a state. I mean, it's not bad. It's disgusting. Let's talk about ease in. What ease in does is it shifts the change of point to a later stage. So the acceleration goes on for a longer time. It deaccelerates and it rapidly deaccelerates. This is a very good example. If you're making corousals and stuff like that, say you have two images and you're switching states between two images. It's very eye candy and it's highly functional if the images which are loading up for the user to see come up slightly slower so that a person at least has an idea from where this thing is coming from. This is the concept here. Similarly, we have things like ease out, the hair, the acceleration begins very rapidly and then the deacceleration occurs. This is another state of this thing. When we have these two together, we call it ease in and out. We have two change points. We have acceleration, deacceleration, twice happening over here with a constant speed in the middle. So that's a bit of the physics behind animations and transitions to be more appropriate. So yeah, if you really want to play on this, there's an amazing tool on the web. It's called Cubic Bezier. It's written by Lee Voreau. It's an amazing tool if you want to run your own animations, if you want to play around with it, if you have a hat with it, it's pretty amazing. So yeah, now I make a computer for humans. Now see the change that occurs, whatever I said, let's just try to implement it. So I'm adding a list element. This is how it should be like. It's like elements, it goes down, a new element slides in. It's much more clear. At least I have an idea from where the new element comes in from. Doesn't it make more sense to have stuff like this going on? It's very simple. It's very simple. It's like one line of jQuery and two keyframe elements that I'm using here. The concept is simple. There's no badassly involved with animations here. Oh cool, this is cool stuff happening with this. No, it's simply functional. So there are various other examples on the web. I wanted to show it live, but there's one pretty good app with the dribble, dribble hazard. It's pretty nice. LinkedIn for iOS is very amazing. When it comes to transitions, they are not static. They are highly dynamic. They make sense, but one another mantra I want to add right now is don't overdo with animations. They can screw up your mind. I mean, it becomes haphazard after a time. Animations in control are brilliant out of control animations are very sucky. This is an example I was talking about. One read, which is a paper that I was going through. It's based on, the paper is written by two Stanford graduates. These guys take animation as an example from cartoons. I'll give you an example. Disney has a huge set of guidelines. There are 12 of them. There are different forms of animations like exaggeration, easing, cushioning, etc. Cushioning is very simple to ease in, by the way. So that's one very basic fundamental of animation. Going around, they're very amazing. I mean, and user interfaces have a lot to take from cartoons. You can go through these people. It's very amazing. So as Pascal Resilva says, he's an animator at Alify, by the way, it seems to me that more people don't think about interfaces with respect to dimension of time. Motion can provide so much information, and it can provide context to information, which is much more important than designing an interface. So that's me. That's not me. Yeah. If you have any questions, you can just pick me up. Questions? Questions, questions, questions. Hi. Yeah. The example you showed for linear, I'm not sure. Are you sure that's the way linear works? Yeah, that's the way linear works. Isn't it, you know, there's no acceleration at all in linear? Linearization has a central midpoint. There is acceleration there. It's not your, it's not linear velocity concept that you're using there. It's acceleration, basically. Linear corresponds to a change point that happens exactly in the center of the state. That's the very basic. And that is how it runs. I mean, it is linear. Okay. Otherwise you can just not have animation, do not accelerate it. You can just move it from state A to state B and it will work. That also exists. Questions? Hi. Just a simple question. I was very curious as to what you define as functionality and what you define as aesthetics. Because when you say a list item is becoming more functional by adding a transition into it, what do you think a list's function is? And what exactly would you keep including in aesthetics? Because then I would say the fact that a list item has a blue color or has a gray color is also adding to functionality. The fact that it is likely wider is also adding functionality. So where exactly do you stop rationalizing everything as functionality and call some things as aesthetics only? Okay. Okay. I'll start with this. Say you design something, it's state A. We have something, we put in a lot of graphic design, we put up a lot of functions, a lot of CSS. We make a very good, minimal, good-looking interface. Okay. And you design a state after that, which is a very simple example that I gave of the list. The state B, when I'm adding a list element to that, that is basically, see, what the concept I'm trying to tell here is, we all of us have some sort of experience in using interfaces on the web, right? What a point makes to me, all this comes from experience. See, I'm designing an interface for my mother who's like not really into computers at such. Now, the information along with context adds to the functionality here. It is not just the information, it's not, okay, the list was there, list got added. It's okay, but where it coming from that adds context to it. It brings more life to it. It makes me think less of a robot, it makes me give a less robotic feeling of using an interface than a more human touch involved in it. And that is exactly my point. So what is left as aesthetics in it? I mean, in case you can answer that quickly. Aesthetics is what I'm doing in state A and B. Aesthetics does not involve the transition. One more question? As I guess I've seen, is the alumnus of my college. More questions? Yeah, as far as Michael is back. So that's it. Thank you. If you want to talk more about transition if it is, I'm right outside.