 We're going to talk about algorithms for animation. So really simple math that you can use to start to introduce motion into your user interfaces. And it's really this part. This talk is like three parts. One is a little bit psychology. One is a little bit math. And then there's sort of a healthy dash of kind of performance and tools. So my name is Courtney Hempel. I'm from San Francisco. I'm a partner and developer at Carbon 5. And I'm always looking for feedback. So if you guys have things to add to this talk or interesting comments, please get in touch with me. You can tweet at me or send me an email. So there's sort of a meta reason why I want to do this talk. And it's to kind of address what I consider to be the elephant in the room of our industry. How many people here, if at all, do we have that are designers, like visual designers? Anyone? Nice. That's awesome. So not a huge contingent. OK, so the rest of you, are you developers? Raise your hand if you're a developer. OK, so this is the majority. So wait, keep your hands up for me. Everybody raise your hands. Not everybody, but the developers. Of the developers, how many of you feel like you have an eye for design? Meaning that you can sort of see when things look natural. You have an aesthetic. Keep your hands up if you feel that you can state those things. Yeah, so one of my points of this talk is everyone really can design. And you can sort of have an opinion about design. And you can work really closely with designers. So similarly to the designers that I talked to that are like, should I spend $17,000 and go to Hack Reactor? I think equivalently, developers, it's sort of on us to say, what are the things we can learn about design in order to help move forward really our industry as a whole and use your interfaces. So I'm going to start with some basics. And these are really just the fundamentals around kind of like, what is animation? Where did it come from? So what you're seeing here is everybody knows this is really key frames in an animation. So animation was started, not by Disney, by a fellow named Windsor McKay. And he came up with this notion of getting really high quality designers, cartoonists, to come up with key frames. And then he hired a bunch of junior designers to come in and have them paint in the frames in between the key frames. So you're now familiar with all this terminology. Those are the tweeners. And we have software that does the tweening for us now. And that software is based in simple math and physics. But you can make it extremely complex. I mean, the Pixar that we know today is using extremely complex algorithms to make very natural, oftentimes very interesting, motion happen. So there's some fundamental rules to animation that I want to walk through with you today. But this is really where it all started. And Disney obviously used this and leveraged it. And there's 12 principles of animation that I'm sure everyone's heard about that Disney created. But they're good things for you as developers to learn about when you're considering animations. So, oops, I think I passed. So to go back in the spirit of Saturday morning cartoons and to try to continue with this entertainment value of this conference, which I love, we're going to see this is Before the Flintstones with an ode to Ren and Stimpy. This is Gertie. So this was really the first official published broadcast cartoon. And this is Windsor McKay. So this is Gertie, the dinosaur. And you can see that Gertie's not all that complex. She's a very simple drawing, but you have this sort of emotional resonance with her. She's really interesting and you sort of want to see what she does. So something that humans are really, we're super capable is to recognize movement. Motion is something that we have evolved to need and to recognize very clearly. So, elephants is sort of a theme here. There is a lion in this picture. You can't see it because it's camouflaged behind this bush, but if that lion were to move, this elephant would see it. So movement is something that we innately respond to almost more than anything else. We're actually very crap at perceiving color. And some of us actually can't see all of the colors in the spectrum. But movement is something that we naturally have resonance with and it actually is something that changes in movement, which trigger our response, almost more immediately than anything else. So we can make a decision more often based on emotion than we can on rational thinking. So the rational cortex does actually not engage until like 0.1 seconds into anything. So generally humans, we make these trigger responses more often than we do having had the consideration. This is also sort of the reason why users get very impatient with interfaces. If you make your user wait longer than 150 milliseconds after they click on something, they are already distrusting what they're being presented with. So keeping in mind this notion of having people really make decisions based on motion and based on the emotions that they're feeling around an interface is actually an incredibly powerful way for you to educate and oftentimes get a user to do something with the website that you're creating. So animations are effectively cognitive aids to us. They're things that allow us to either map out an interface. So giving up on this notion of having to explain via a lot of text or a lot of photos, you can actually use motion to indicate to people what it is that they should be doing and to oftentimes help them to discover things. So one of kind of the basic tenants around, again, psychology is this notion of affordance. So as humans, you can actually, you can sit there and you can look at a chair and you sort of afford a use for that chair. You also can afford other things to it. You know you can sit in it, it's pretty stable. You know you can probably get on top of it and use it to reach a book on a shelf. You also know for this particular chair, if you pick it up from the back, that it's gonna kind of swing because of the weight of the seat. So perceived affordance is something that Don Norman brought up in his book, The Design of Everyday Things, which is also a great read. And this is really the notion around taking things that we know and recognize from our real world and putting it into a digital form so that we can tell users what we should do with that. There's a very clear showing of this when you see the trash can icon on an interface. You know if you drag a file into that trash can, you're pretty much gonna delete it. So no text necessary, no help, no guide. You know that you're deleting that file. Additionally, this was sort of brought oftentimes into Apple products by Steve Jobs when he would do skewmorphism. So he would bring in sort of the chrome effect or the leather. Oftentimes it doesn't really work all that well, but you can see that motion is something where beyond even just the perceived affordance, you can actually signify to people how things can be used in an interface without creating a lot of declarative text around it. So it's a really, again, powerful way to clean up your interface. And it's also sort of this notion of we're moving further and further away from really that assembly language, you know us like hacking away in the terminal to abstract what computers can do into something that's more natural to us as humans. So we're getting more and more abstract of layers on top of that, you know, you can, the GUI layer also knows as WIMP where we had windows and icons and menus and pointers. All of those things were sort of the first abstraction for us and it effectively became, it optimized everything that humans could do with computers, you know. Not a lot of people were very effective in just coding an assembly, but we're getting one more level of abstraction and ideally one more level of efficiency beyond that with sort of natural user interfaces. So you can imagine this is like squishing on an iPhone or swiping on your, sorry, squishing an iPad, swiping on an iPhone. These are things in which we're actually using us as humans and things that we naturally would do in the real world with our digital devices. So you can imagine the next evolution of this, and I'm not gonna go too far into it, but you know, this is AR and VR. What are the ways that we can actually enhance the ability for us to do computational operational things but with the natural environment that we work with? So this is all sort of moving more fast than we can even realize, but there's some basic things that we do need to consider when we are building motion into our interfaces. So I'm gonna go through a couple examples that are absurdly prevalent today and you're gonna recognize all of them, but the ask here is really, you know, you guys are all incredibly smart. I talk to a lot of you and what are the ways that we can now bring even more natural motion and emotion into our interfaces? So motion detection is a clear one where, again, we cannot detect color very well in our peripheral vision. In fact, we can't really see very much at all in our peripheral visions, but evolution has made it to where if we do see motion in our peripheral vision, it's something that we immediately tune our attention to. So something that you'll see, and this is all over the internet, who sort of recognizes this pattern? Anyone, Pinterest? Yeah, so we see this all over. This is basically auto-loader. I mean, we all, honestly, we love it, right? We don't have to click and reload a new page. Immediately we're getting this responsiveness as we just scroll down and we're getting new things loaded and loaded. Interesting thing about this is there's this psychological component too where it's almost addictive. I mean, this is sort of like the constant scroll of Facebook or Instagram. It's like new information very quickly and we're being told that it's coming more and more by the sort of animated motion. Another thing to consider, and this really comes into play when you start to think about the design of an overall brand. There's ways in which you can trigger people's emotions to think a certain way about your design and the brand behind it. So in the first case here, this is super simple. Okay, we're wrong. Like, we get it, okay, we did something wrong. But if we click this, it's really subtle. There's absolutely zero complexity behind this, but you're getting a little bit more of an emotional reaction from your user. You're also giving your user feedback, which is huge. If you can respond to your user within, again, 100 to 150 milliseconds, they're gonna be way more, they're gonna have a higher fidelity to your interface if you continue to do that and if you're persistent in the way that you use that. So giving that quick feedback and honestly having your users feel like they're getting to do something and that they're getting a response back from that. So something I really am interested to see happen is navigation has moved from this place where it was like these absurd hierarchies and then breadcrumbs all across the board. And you've noticed breadcrumbs are sort of dying. You're seeing a lot of really well-known companies effectively get rid of them. The back button is the thing that we use when we need to go back the path that we came. So the breadcrumb notion is a little bit false. And so there's ways in which we can actually have our users without a lot of text, again, a lot of different components that we put in to be able to map out our site by using these different elements and sliding them in, sliding them out, showing emotion, allowing the user to sort of see that there are things that they can go on access in these different areas. So this is a traditional navigational structure, again, incredibly simple, but we're jumping. You know, this is sort of the traditional either anchor link, jump to, or reload of the page. What we see now everywhere is parallax scrolling. But the reason everyone loves it is because you know naturally where you are in this page, and you also know exactly how you can get back to it without reloading the page and without a lot of having to go through a bunch of logical thinking. So helping your user in an interactive way really have a cognitive map of your site without having to show them a bread crumb or a site map or any of these other things. And this is something that I think users really like to do now. You know, bringing everyone talks about gamification, but it's more sort of this notion of like having your users feel like they can discover your site and that you can sort of through the user interface understand where your users and figure out the 90% click rate that your users are going for. So if 90% of your users are clicking on the About Us page, make sure that you can direct them to that thing first and you can do it by motion. So making sure that you're really responsive and also I'm gonna talk about performance later, making sure that responsiveness is speedy. The other thing, I mean, how many people here have filled out an online form, signup form today? Anyone? So it's hilarious to me. Like if we were to have a piece of paper for every form that we fill out on the internet, we would have no forests. It's like bureaucracy is raining supreme now. But doing things to where you only show the user what they need to know and correcting them along the way, logically this just, it reduces cognitive load. So your users don't have to scan through a form and then go back and start to fill it out. You ask them for what you need to know, when you need to know it, you correct them in line and then you get them on their way. Another thing that's really powerful is making sure you give your users context of what's happening behind the scenes. So there's an obvious famous example of this. This is sort of the click to refresh. So there's an actual patent on this animation. So Tweety was the first person that did it, Twitter about Tweety. This is effectively a way though to tell the user that something is loading, it's coming, and then to present that information right where you told them it was gonna be. So keeping the context, keeping them informed, really great way to keep your users engaged with what you're doing. So again, sort of throwing it back to you, like how do you communicate ideas via animation? What are the ways that you can play around with it? The reality is it's all based in some really simple math. This is in rocket science and even though there are a ton of frameworks you can use, I really believe it's awesome to sort of step back from all the frameworks, all the CSS3 and just come to understand the very, very basics of the math that's behind all the frameworks and all of these algorithms that we're using. So happily, it's pretty dead simple. So this, it can't get any more basic than this. This is effectively just moving a pixel across the screen. So there, this is really the key frame, right? You're moving a pixel to pixel. You know the position, but it doesn't necessarily give you much else. You don't know the progress that you're taking across the screen and hence you can't really manipulate it. So what we really want and where animation that's interesting is when we can sort of think in things of percent changed. So this is the simple function that underlies all animation and all it is is really figuring out where you want to start, where you want to go and those two things together are the change, the total duration and then what you can use with all that is the progress that you've made and then that's what you really want to manipulate is how you go through that progress. So the cool thing is to make motion feel realistic, this is what you want to use to manipulate. So interpolation algorithms can get insane. Again, sort of people that develop algorithms for Pixar, they literally will get down to where they're fine tuning the motion of one single hair and how that hair interacts with other hairs on the back of a dog that's gonna be sprinting across the field. So people spend tons of time just coming up with really in-depth custom algorithms but those are the things that come up with that really unique natural movements that you see. So what we're trying to do is break everything down to a number between zero and one. So it's just, it's a percent complete. So what you're looking to do is figure out what is the change that I want to have happen and then where am I in that duration? And when you can map everything into this zero one, you get a couple things. One is lots of manipulation possibility. So one great thing is if you multiply a number from zero to one by another number between zero and one, you get a number between zero and one. So unending math possibilities. And then an additional, this is gonna work for everything. So it doesn't have to be pixels, it can be shape, it can be color, it can be location, it can be whatever you want it to be. So you have a lot of potential to use this in a variety of ways, so flexibility. So now that we have this consistent number to work with, this is really boring, it doesn't look that much different but what's nice about it is we're gonna be able to do stuff with it. So this is linear animation, meaning that it's incredibly boring. Nothing in this world moves this way. And the interesting thing is way, way, way, way, way, long ago people recognized this. And there was this field of study that was actually, it came up really during the whole course of kind of the Manhattan Project, but started by Santa Stas Ulam. And he has this great quote, using a term like non-linear science is like referring to the bulk of zoology as the study of non-elephant animals, back to the elephants. Anyhow, so nothing is linear in the world that we live in. We have TORQ, we have DRAG, we have SPIN, you play pool and all sorts of cool stuff happens and we have friction. So we need to be able to represent that in our interface and if we don't, our users are gonna feel like they don't trust what we're doing to them. And so that's this very uncanny valley effect that you can have. So what are some of the easy ways that we can start to introduce that feeling of nature into animations? So what you're looking at here is an easing function. So same beginning, same end, but we're varying the speed at which the change happens. So we're gonna start slow and then we're gonna move more and more quickly. So once again, same exact function, but that change in the property, we're gonna now multiply that times some float. And this is where stuff gets interesting. That float can be any sort of math function, any sort of algorithms. And then we just add it into the values that we're interested in. So we get into this notion of power function. So this is an ease in. So this is more interesting, sort of almost fell off the screen. This is sort of like our Ferrari. So again, we're changing the progress in a power function. So it's moving faster and faster over time. The reality is like, if you actually do this in an interface, it kind of feels like there's a Ferrari speeding at you and then stopping right before it hits you. So kind of jarring. And you're probably, if you were to click through a bunch of web pages, you're not gonna see this use that much. But we now can sort of swap and do an ease out. So this is really just the inverse, but you see this all over the place. So this is, you've seen this where you have a window that kind of slides up into your screen. If you click through different websites, you'll notice that more and more of this is really happening. It's like the slide in, either from the left, right, top, bottom. Again, ways like you were actually navigating and showing people where things lie. So this is gonna look really similar to what you just saw, but it's actually subtly very different. So something that we do a lot of carbon five in addition to having our designers and developers sort of pair together. But there's this notion of putting together like a kit of parts or a style guide. And our style guides are living. In effect, it's code checked in. And that code is wrapped around to keep with sort of the brand standards. So traditionally brand guidelines around like, what's the font, what's the line, what's the kerning, what's the spacing, all of that. But you can actually add animations into brand guidelines now. And this allows both designers to get it just right for the brand. And it also allows developers to grab that code and to repurpose it in many ways. So here are a couple more interesting ways that you can see people are using and some more sort of nuances to the functions that we're using. They're gonna start to get a little bit more complex. Follow through is again one of those 12 principles of animation that I talked about that Disney sort of comes up with. So this is where you start to introduce elasticity. So you'll see that the formulas are getting a little bit more complex. But you can go and you can grab these formulas from wherever. I mean honestly if you Google easing functions, there's like 90 different places where you can find them. So you can start to like plug and play. You can make your own custom libraries which I highly recommend when you're doing customized animations. But you can start to get a lot more fun. So the elastic notion of kind of like following through and coming back. Something that happens pretty routinely. And then of course bounce. So this is really sort of the fun bounce used appropriately, it's entertaining. Used obnoxiously, it's obnoxious, right? So you can imagine this getting to the place where it's almost like the blink tag and you're like Jesus stop. So this is three lines and a bunch of circles on a page. Oh shoot, I left the caption there, damn. All right, well, what does this look like to you guys? What does this remind you of? Anyone? All right, so yeah, it's birds on a wire. But coming up with sort of this notion of how do you animate around a swarm? How do you make it feel like it's really moving that the birds are sort of like moving in and out and away from each other. And then when they land on the wire sort of shifting their movement, you have to actually look at birds when you're doing this to sort of understand the ways in which they're moving. But this is literally just circles on a page. But you can have kind of an emotional connection to them. You can understand implicitly what they are. If you stopped this, you would just see circles and three lines. So it's sort of interesting, there's not a lot of design per se backing this, but there's a lot of math and there's a lot of interesting association that you can make with this. Okay, so I'm gonna get in a little bit to tools. So you can see when animations get complicated, there's just a lot that can happen behind with those algorithms. So what are some of the ways that you can play around with animation without having to get too clever and too crazy with the math? So starting off, a lot of designers that we work with and that I've talked to, they seem to use these for prototyping. So each one sort of has its bonuses. Keynote is just dead easy. Envision is something where you can have a lot of visual design behind it. But again, in this case, the animation is always very decoupled from the end state, meaning that you're not animating in the browser, you're animating in a tool. So Adobe Edge sort of came up with this notion of animating a tool, and then of course we are going to create your code. In many ways, this always is flawed. Code that is created is pretty overblown, and you end up having to retool it a little bit. But when you're sort of playing around and you're seeing how can you use CS3 animations and what sort of animations can you do and what does it generate, it is interesting to play around with so I'd recommend trying it out. Principle is something that I've heard being used a ton. It's for the Mac, it's usually oriented more for iOS and desktop animations, but it's actually really, really easy to use. And Easel is one that just recently got told to me and I haven't used it yet, but it's a product from GitHub. So interesting to try that one out. So a little bit about performance here. So CSS actually is the most performant, ostensibly, and I know I'm gonna get an argument from that. Basically, transforms and translations through CSS seem to use the least amount of the browser because the browser will compute them and it will draw and render them a lot more efficiently than if you're using a lot of CSS or if you're using CSS in sort of a poor way. So if you're doing very lightweight animations, try to use CSS3. These are a couple different libraries where you can use CSS3 and you can pull again from them using functions to at least start. So the material design line, is anyone here familiar with Google material design? It's a really great thing to check out. So they have a whole part about animation. Definitely go check that out if you're interested. And these are, again, they're simple animations. The thing is, once you start wanting to manipulate an animation, even a tiny bit more, so like starting it, stopping it, pausing it, reversing it, whatever, you're gonna jump into JavaScript pretty quickly. So these are some of the libraries that work really well and that I think are pretty small in their footprint, which I personally like. So Framer is one of the ones that I feel like is really powerful and yet lightweight. Twain is super lightweight and it's really just the easing functions. Move is a new-ish one, pretty well supported. It's on GitHub and really it's, again, sort of more on the easy function side with a little bit of interactivity. And then when you're ready to go nuts, GCEP is awesome. So that's one where it's like sort of, if you can start just with the JavaScript, slowly move your way up to the GCEP. But again, the way in which JavaScript now works, I'll talk about this in a little bit, JavaScript and CSS actually work really well together in the browser as long as you're using request animation frame. So another thing that has been told to me over and over again is customize your easing. This seems sort of like why bother? It's just these details. But if you can really start to tweak your animations and make sure that all the elements on your page are sort of moving in line with the same kind of overall look and feel, it's really important. And there's super easy ways to customize this. I'm gonna do a little bit of live debugging here in a minute, hopefully it won't crash and burn. But these are the things to sort of keep in mind. So even though CSS is more performant when it comes to super basic animations, request animation frame has now been optimized. It's effectively an API and it is going to be able to optimize concurrent animations. It'll put them all together and it'll do a single reflow and repaint cycle. So the request animation frame of JavaScript, you can use that sort of with CSS3 and that actually ends up being the most performant. And I'm always sort of like, with the caveat that, always be checking your performance in the browser using the browser tools. So another thing, there's been a good chunk of research done by the folks at Blinks. This is sort of the Google departure from Chrome. So if you do 100 seconds, sorry, well it's basically one second, but 1,000 milliseconds for load, that's something that users would tolerate. Pretty much everyone here is okay with about a second of load. After that, you need to make sure that your user interface elements, if a user clicks on something in your interface, you need to respond to that click within 100 milliseconds. At the very edge, it should be 150. So these are really guidelines to follow, but it does have a net effect. Six milliseconds is what you wanna consider for each frame. That ends up equating to less than, or sorry, more than the 60 frames per second. But what you're trying to do is put in a little bit of padding there for any sort of concurrent things that the browser's doing. And then the 50 millisecond is really sort of like cleanup, and it also gives a padding for in case the user actually hits that button again, that you can actually respond to it. So let's see, we're gonna try to do a little bit of investigation into, this is Chrome, and so we're gonna check out how you can start to play around a little bit with your animation. So one of the things that you can see is over in the right corner here, they have added in this fun little animate control. So you can actually increase, decrease your animations. You can pause them, you can play them. It all gets pretty fun. Additionally, you can mess around with the easing. So if we scroll down here, you'll see, where is it? How did I lose my easing? Okay, here we go. So you can mess around with these and they get really fun. You're not gonna see much of an effect here, this is probably a poor example. But you can basically use this and then you can copy in your code right there. So this is a great way. You don't even have to open up a tool. And then the last thing you'll notice up here is you've got these frames per second. So making sure that you're hitting the frames per second that you're looking for. And then the best part about all of this is, if we scroll over here to the timeline, we can actually start to capture. So this is the great thing. You'll see how much of the buffer that you're using. So one other thing is, when you're using request animation frame, the other enormous bonus that you get from this is if a user jumps off from this tab to another tab, it will completely stop this animation. So that's something that you get if you use request animation frame. So what you get out of this is starting to analyze each component of your animation. So you can imagine if there's a bunch of different things happening, you could actually take like a snapshot of a full animation cycle. And then you can go and you can dive in and you can see exactly how much time is being spent in your loading, scripting, rendering. There's some great sites where you can go and start to investigate and see sort of who's doing bad jobs and who's optimizing. But this alone will allow you to really get yourself to a place where you are not gonna be dragging your user through a lot of weird JavaScript. So that's pretty much that. So that's Chrome. I would highly recommend, Paul Irish has got a great video on how to use those tools and sort of how he's sort of been able to like debug sites pretty well with that. They did a great thing with Wikipedia where they found that if you actually use jQuery's hide and show function, it like almost brought the site to a crawl. So I implore you to go forth and animate. And I also have, these slides are gonna be online. I'll tweet out the link afterwards, but these are sort of some of the examples of kind of the design notions about what I was talking about. And if you have any questions, please, obviously, I'm interested to hear how many of you guys are doing this. Are people sort of coming up with like novel new approaches? People are doing anything with kind of like the web VR stuff. There's a whole crew at Carbon 5 that's really into that. So if you're doing that, come find me. That's about it. Thank you.