 Possibly three or four seconds to finish. At least you know that somewhere around one second it is going to end. Let's get back to the slides. So yeah, I was getting back to it. So yeah, set it to as sucks if you want to actually assume that it's a reliable timer, it's not. So you move on to obviously tweens. I'm sorry, this is the point where I would have shown you the tween animation and you would have gone pooh. But anyway, so you moved tweens. Now these sound like a good idea, doesn't it? So as far as I'm concerned, as the moment I learned about this, I've stopped using set intervals all together. I only care about tweening all the things. Anything that's timer related now, I use my tweening logic or my... I have a little f of t which tells me what it would be at that given point of time. So alright, that's tweening. That's cool. Let's move on. Easing. This is actually fun for maths junkies. Linear, what you just saw was a linear animation, of course. Move the same amount of time at a given point of time. Real objects don't really move like that in the physical world. For example, you can take a ball, roll it on the floor. It's not moving at a constant speed. In fact, it's decelerating based on gravity, based on friction and so on and so forth. Real objects behave like that. Oh, I don't have my phone on me. You can see it even when you, for example, take your iPhone and you let go of slide to unlock before it actually locks. It actually zips back like a spring, not linearly, not in constant motion. Even stuff like fade outs. You don't want them to be linear fade outs. Possibly you might want it to fade out really quickly in the beginning and then slow out. I have a couple of examples. But these are some common easing equations for a given f of t. What would... Your standard linear... Just as comparison, your standard linear graph would be a straight line here. Do we have any questions so far? Like, please stop me if I'm confusing anyone. I get confused, right? So the idea is then that given a particular f of t, you can control the speed of the animation. Not just the speed, you can actually do some fancy tricks with it. For example, if you're trying an elastic easing, then what happens is it'll probably shoot over the target that you wanted to and then come back. That's how natural elastic works. Sort of. Then there are bounces where it actually hits the point and then comes back. That's how a ball bounce works. It reaches the final point, bounces back up and goes around and starts tending towards the zero point. That's how a ball bounce works. Again, if you want to see an example... In any case, my point is that you can do different easings now on your little animation. You can make them... I have a page which demonstrates a bunch of easings. You need to... I start off with... You should zoom to your screen. I shouldn't have done that. With the zoom button that should be cut. Oh, sorry. Who knew? I never know what those buttons do. So I have a bunch of different easings on this. I think my first one is... Oh, that's a bounce. The animation will look like... Just quickly... That's just a plain linear easing. Or I think it might be sinusoidal. That's an elastic easing. Oh, they all look the same, don't they? Point is, the next time you're actually doing an animation, don't just get away with saying duration one second. Ask yourself what this object or the thing that you're animating seems to the person who's looking at it and try to apply it inappropriately. Something as simple as, for example, if you try zooming past the end on a browser page on iOS, you see that it just bounces back. That makes it feel a little more natural. Experiment with whatever easing equations you want. In fact, you could make your own. I'll be getting to those in a second. But easing is good. Easing is nice. It's the one thing that you can do that can immediately give a feel to your application. Whether it's your sidebar sliding out of the way or if you're actually, you know, congratulations, you are now a new user. That's probably going to be a little pop-up that comes out. Try to ask yourself what the user thinks when he's seeing that. Is there a sheet that's bouncing out at me or is it just something that's fading in? Doesn't matter. Isn't there a problem with this now? This is all patented by Apple. You can't use it. You can't use elastic easing. It's patented by Apple. I would love to be sued by Apple. I'm happy. Oh, shit. I will take that and frame it. That's the main reason why Apple does not have it anymore. Really? It's patented, sir. It's okay, man. They've got their own shit going on there. Did you hear today Google is sub-suing Apple? It's brilliant if you look at a little graph of how they're all connected. Everybody's suing everybody else. The lawyers are minting. But yeah, use elastic. I don't care. I'm going to use elastic. I vote for Yahoo. We are going to leave it to you as well. So request animation frame. Request animation frame. So as it turns out, this entire... Sorry. Yahoo's request. Oh, that's done. Our new boss said, are you guys stupid or what? That's done. I love new boss. Anyway, request animation frame is one of the new APIs that's come out with HTML5, CSS3, add your own buzzword here. The idea is that now that you're doing this thing where you will constantly be running some particular function every step that you want to do an animation, a browser developer said, hey, we can give you a little API to use to make it a little more efficient. Because as it turns out, the browser is in charge of doing paint events. If you guys know what paint events are, basically where you render each... just like a little TV, how you render every screen of your motion. That's how... It's how regular, you know. It creates a buffer, pushes it to the screen and so on. So it turns out, since the browser is actually doing this, it can help you out and give you a little API that says, hey, why don't you use this function instead of your timer? And what we need to do is that make sure that every time you run some animation at this event, at this moment when a step happens, we'll make sure all your animations happen in one paint. This makes it a lot more efficient, makes it a lot smoother. And there's a really cool trick that if your tab is not open at a particular amount of time, it drops its rates. Which means you save battery power. This is, you know, Paul Irish says, it totally saves battery power. And, you know, it gives sort of better user experience in general. I have a link here. I don't want to go into detail because of the amount of time, but have a look at this and it's a very easy shim. You can just dump it into your animation engine manual. Specifically why this is important though, however, is mobile. You want low battery usage and you want something where, you know, whatever is native is giving you as much help as it can. And it's really cool. I have seen places where stuff on my phone is running faster than stop on my desktop, which I know the dev grid of Chrome on my desktop. But mobile, this is a great use case for mobile where you can actually make more efficient animations without burning battery or simply moving on. What are dynamic screens? I have a very simple demo actually to show you. This is actually the moment that you should take out your phones. If you have something which just like to unlock or just look for somebody, you can just pass my phone around over there. Don't unlock it. Keep your finger on the icon. Are you following me? Anyone having a look? Move it around really quickly. Yeah, left to right. You will notice that the little icon with the arrow on your finger exactly. In fact, it's actually just trying to keep up with your finger. You guys notice that? This is something Apple does right. This is something Google does not do right. Especially if you try on that browser. You can try the same thing. Open up a web page on mobile Safari or whatever. Put your finger on it and try scrolling up and down. You'll see that the page is just trying to reach. That's a much more natural reaction than actually following your finger. And you can feel it. I have demos of course in JavaScript which improve this. But this is the idea of dynamic cleaning. Where you don't know what duration the animation is going to last. You don't know what the destination point itself is going to be. And you want to be able to write in the middle of your animation, change these parameters. There is one very famous way of one famous algorithm for implementing this. Anyone has heard of Zeno's Paradox? Oh sweet. Two people. I'll quickly go over this. The idea is that I'm just going to show you the image just to make it a little clearer. Let's say that's the end point. What I'm going to do is that in my first frame I'm going to cover a particular fraction of the distance to be traveled. Here it's obviously half. You could make it 0.9, 0.7. It doesn't really matter. It covers half of that. In the next frame it's going to cover half of that. And so on and so forth. It feels like a spring. It starts really fast but then slows down near the end. This is another algorithm that's used in Apple by the way. It tries to move as fast as it can until it reaches here. And then finally reaches the point. This is my favorite part actually because I have a whole bunch of demos to show you for this. Take this over here and just first very simple dynamic tweening exercise is for Dragon Drop. Your usual Dragon Drop, what it does is it captures your mouse position every time you click down and move around and make sure the box matches it for every point. Now let's try it instead with dynamic tweening and see what it looks like. You can see that it tries to just follow it around and it starts feeling a little more natural. It's attached to a spring at the end of your at the end of your mouse tip. And that's nice. We did a little user user experience. We did some user testing in Yahoo with this but it's actually a lot more helpful and they feel like they're interacting with the interface in a slightly more natural way. Especially if you make it look physical make it look like a cube or whatever turns out that that's useful as well. Even more interesting even more interesting is that now using this dynamic tweening thing now that you can change what the duration and the destination of the point is going to be you can quickly implement inertia like very flick it and it keeps moving for a while. This isn't a really perfect implementation but for what it's worth you can just drag it and push it around. That's pretty nice, isn't it? Imagine if you're actually sorting a whole bunch of photos and you want to quickly throw them around or arrange them. For a user who's using it who doesn't give a shit about whether you're using JavaScript or whatever he just sees his photos as physical objects it's nice to be able to take this and flick it around and move. The logic for it is really simple. You can see that all the objects actually have a little bit of inertia to them. It just makes it that much better. Oh, this is how I don't really see the background in this but this is how I'm going to implement slide to unlock. For your reference here I actually have the box that I'm dragging outlined just so that you can see that it's not really following it exactly but just for the little thing this is how slide to unlock is on your iPhone. You drag it like a spring, you let go it springs back but let's say you go all the way to the end, unlocks it and then at that point of time of course the screen blows out and moves ahead. This is my little parallax demo it's surprised a few people they don't know what to make of it but the idea was I didn't say it, you guys but the idea is again similar I'm just tracking what the point on that my mouse is at and I'm trying to make sure that these guys try really hard to reach it as they can using that same algorithm there's Zeno's algorithm and it's nice, it looks weird Yeah, anyway, that's what the deal is. This is my implementation of rubber banding which is you reach the edge of the screen and Apple will sue me if they get a hold of this and Apple will drag and the idea is that now that I know that once for example this reaches this point where if you see it's boundary on the edge I change my algorithm at that point of time and then it becomes a rubber band and it starts moving around I can even flick it around and that's pretty neat if you imagine that this would be I obviously made a small box to illustrate it but if that was your entire screen you could theoretically put whatever content in there, just to be clear I have a little wrapper thing here which would be your viewport and this would be the rest of your page this is a lot of people get this wrong the latest offender I've seen is Google groups if you're not online or mountain lion and you try to scroll down it tries to do this little fake rubber band for you but it feels really icky I tried seeing what that code is up to but they don't do it right it's a lot simpler if you actually know the information that requires a target without a duration and you go along with it this is something I call the Huxer effect this is something that there's a famous photographer called Sharad Huxer and I used to really like this site this was his implementation of a slideshow the assumption is that those will all be tiny thumbnails and you can move around see what photo you like, click it update whatever you have in the background that's pretty cool, right? it's not bad move your mouse away it's as simple as a few lines of JavaScript you know what, every time the mouse is here make sure that the target destination of the given object is elsewhere it's nice maybe I should have made a little more fairly business there it works nicely there's that I also want to show you a few more things that I do I call this my animation library I wanted to show you this slide before I showed you the demos but in any case I have the code to share if anybody wants to have a look at it mess with their own animations just get to me, it's not really on GitHub yet but I'll put it up as soon as I can quick side note you guys know that you can create shapes with JavaScript there are a couple of links here this is really interesting that now that we have CSS3 with rounded corners we can actually create nice shapes which look like stuff like real objects with CSS I won't talk too much about it you guys know what CSS3 is you're going to end off as geek events and not about it but here are two links that you can see and quickly copy paste and make your own stars or cubes and so on and so forth and as a last demo something I'll be working on Kiran's going to hate me for showing this in public but it's a little animation that I'm planning to incorporate into a site that we're doing assuming that it renders some time now come on something's up in it anyway while that loads nice animation that shows cubes on an isometric plane I have a little artifact because this is the dev build of Chrome of course but it's nice, those do seem like cubes don't they and they do seem like they're moving around those are how it dibs, that's not canvas that's not SVT, that's nothing that's actually just a few dibs that are skewed a little bit of transform, a little gradient on top of it that looks pretty good I think I plead for your attention I'll show you a couple of other quick demos for example this is a sample map interface that I was working on you can just scroll around by using your mouse, I'm not dragging anything it's nice, perhaps there might be an improvement where you actually find something you click on it and it centers it but this is a lot better than the usual map interface where I see people dragging stuff around my dad never got that, I had to explain to him that he needed to drag it keeping an eye on the time this is something I call Tron worms these are all dibs, again this is not SVT, not canvas and how pretty does that look so pretty I love it so much work I've put into that look, my other point of this talk was to tell you that you could do a lot more with just the basic tools that you have right now something like those Tron worms it works on IE6 there's no hassles, they're just rectangles that are being drawn and being animated now when you go back to work or when you go back to your site project you're doing a little thing ask yourself what this interface means to the user wow I don't know what I said ask yourself what your interface means to your user what does a sidebar mean as far as he's concerned it's a little sheet, it's a little list with things that you want a little quick reference to start incorporating some physical characteristics into it, when somebody hovers over one of those links you might want to this is the third time this has happened to me at a fast heat slice power just goes out actually the last time I think you put it off my purchase I'm sorry I'm going to quickly go through ask yourself what these objects mean to you look at every pixel, look at every little tiny div you guys for example something as simple as anybody used path, the app a little animation where the thing just pops out of the circle and five little options come to you that is so clear, it immediately tells the user what it's meant to be here are your five options I have a couple more demos quickly to show you assuming this goes well let me just plug it in let's try that that's all really oh god hey so I have this this is something I did with SVG it's a little clock where the hands move around it looks so much nicer than just showing numbers which stick over it's something that enthralls the user it's not exactly the prettiest thing but you know what for a night of work that looks pretty good nobody else is going to care about this I assure you your manager is not going to care about it your colleagues want so much, you do it just for yourself because you want to make something that looks pretty nice and professional oh you can't really see this this is something I did with SVG maybe I should call it a little writer I'm going to have to but for the people who can notice there's a little C here and I can that's a chance of moving across no it's good it's just for one sample that's SVG by the way that's obviously not a div to convey the idea that it is actually a little watery fluidly liquid I just did a little animation so that every time the mouse moves over it does a bunch of stuff this is a website that I did for one of my previous employer I'm not really showing up but it's kind of cool the idea is that they have a giant portfolio of a whole bunch of clients and they wanted a quick nice way to categorize it so I did this thing, nice little thing where it actually picks out the ones that are important it's really simple as far as I was concerned I could have just shown the four icons and moved on but it's nice for a user when he comes here and he knows exactly what it means when oh the internet's not working anymore oh there it is yeah that's about it yeah that's it go back, look at your interfaces and see how you can make them cooler a lot of users will thank you for it and I think in the end that's what matters I might have one slide left pretty sure questions? oh yes please show up for JSFOO which is happening in October thanks to Haskeek, Bangalore JS are now our partners should we shake on it? please show up it'll be great, a whole bunch of speakers a lot of people flying in I hope to see you guys there thanks should we have questions? do we need to get into those mathematics or no not really, I would actually recommend this library called Morpheus it's by this guy named DED he works for Twitter, just search for Morpheus look at it, it's the same exact API as something like jQuery where you say duration and so on and so forth dynamic tweening on the other hand I've seen only one reference to it in JavaScript on the web I mean Flash obviously does a lot of dynamic tweening so I can share you my code or you could look at MrDude's your JS for the cool 3D stuff in any case yeah, Morpheus would be a great starting point so you will be sharing your code you can take it right now sure yeah, I'll put it up on the YouTube channel anything else? can you put your slides also maybe on Slideshare or I don't know where sure, Slideshare sounds good the interesting thing is absolutely, I'll put it up on Slideshare cool so the demo that you show with the queues how many tips how many tips are there in that I think there are about 20 times 3 I think there are about 120 faces each face is obviously 100 each face is also running a transforms queue and it has a gradient on top of it and I've actually put like a little bit of blur to make it seem a little smoother so yeah I'm using some Zindex I wrote a little math to calculate what the Zindex layering would be that's why it looks the way it does that is after weeks of fighting just that one single thing but yeah, I do have a little logic that calculates what the Zindex should be have you tried on mobile? yeah, it's not not yet but that's something else yeah, that's just it mobile, frankly, mobile even desktop browsers are really bad with that that means that if I'm trying to move to using CSS translations, 3D translations well, they are actually hardware accelerated even on phones I have some good results with that but nothing to share today alright, thank you