Motion Design with CSS

anyways I had a really well rehearsed intro if I will just say that was not it CSS often gets really underestimated as an animation tool and I think that's kind of sad because knowing CSS animation and understanding it can really save you a lot of time and effort if you ever have to animate anything on the web I mean it only works on the web at CSS kind of little place that lives but if you need to do that CSS has like the lowest barrier to entry of all of our options and it kind of has a lot of power like actually does have a lot of power I sort of have this theory that like we're actually going to show you some of the power of it and we're talk a little bit of technical stuff little bunch of design stuff a little bit of code that kind of thing and a little bit of design and I sort of have this theory that like the people who wrote the actual CSS specification especially the three specifications that have to do with animation I think they wanted to keep it a secret and I know I just met you guys and I sound completely insane so yeah but really because they have we have these three specifications right we have transforms transitions and animations those are all words that sound like they could mean the same thing they could do the same thing all of those kind of sound like they make something move and you're like okay only two of them make the move I can eliminate one for you transforms and don't make anything move nice nice try good for you transforms you don't make anything move so we have transitions and animations and both of those things actually cause animation according to the dictionary because the dictionary and like all humans define animation is something moving over time they both do that only one of them is actually called animation so what's the deal with that see totally trying to keep it a secret but I'll show you what I mean with a cat as is required of me by internet law you are not allowed to demo anything that has to do with HTML or CSS if you don't use a cat if you've ever tried it you probably got to find in the mail it's really large anyways this is my cat Cyril he's a grumpy old man as you can tell from his beautiful model photo but if we wanted to do some things like if we wanted to use a transition to actually make some stuff move transitions are like our easiest way of making stuff move in CSS and we can't really do anything at all unless we actually like give it some kind of you know two states to work with in CSS because we don't want to like write any JavaScript or anything we stick with hover called and kitten just to suck up to him so maybe help me nice to me when I get home and if we wanted to do something we might tell him to like transform and maybe like I don't know a scale by like kind of a little bit if that's cool with you there's an S and transform sorry um and then that on its own isn't really gonna do anything at all because I haven't actually told it to transition anything so we'll be like hey mr. kitten guy if you don't mind oh god I can't even spell kitten you guys I swear I do this for a living oh no this is my favorite way to code cuz it's like if I make a mistake at home no one says anything I mean you think sterols has anything if I make a spelling mistake but you guys laugh it's awesome anyway so we say we want you to transition it just gets worse and worse and we're like transition your transform yeah we don't sound crazy saying that oh maybe take like one oh I don't know point three seconds and just like eat that stuff out if that's cool with you and then if we refresh him we're like mouse over and we're like yay he gets bigger but that's not dramatic enough I mean come on we're on a big screen let's make that bigger and now it's like alright you were really scaling up and that's pretty sweet like it's a transition it's actually animating things are changing over time even though it's a transition but whatever it's between two states we're kind of happy about it if you've ever had to write your own mouse over and like JavaScript or ActionScript you're probably like crying right now cuz it took a lot more than two lines of code and both it does both in and out right yeah that's the magical part anyways that's transitions it's kind of power with super powerful actually but what if we wanted him to do more than just go between like two different places that's where our animations actually come in and to write animations and CSS we use keyframes because well why would we just call them animations I'd be silly when you need to make a list of keyframes and give it a name and that list of keyframes could actually be as long as you can possibly imagine you're allowed just like usually you go from zero to a hundred percent and you are allowed to use decimal places so it's effectively infinite the biggest limit really is your patience to write them and I've learned that it's a true like how much you're gonna type out but I've learned that when you're in front of like say more than 100 people you should limit yourself to two keyframes total rule of thumb so we're gonna go from we're gonna attempt to spell transform correctly this right time that sort of looks like it worked we're gonna say like translate so I access I don't know like a hundred pixels that sounds pretty and then go to a whole crazy keyword it's not going to have any idea what this is going to do and we'll do the same sort of thing we'll transform will trans oh goodness why and we'll do basically go from like go from somewhere lower than you are to go go in and go to where you are now bat on its own does absolutely nothing once again I'm saying this a lot like that doesn't do anything you wrote of can you know a long list of keyframes two lines whatever let's pretend I wrote a bunch for but nothing will actually happen yet until you actually tell mr. Cyril the kitten to animate stuff so we'll get rid of this transition because nothing to transition anymore won't be like animation maybe use the slide one I don't know take like a second and that sounds cool and we'll just ease that out again because that sounds like a good idea um and then refresh Hammond he slides one hundred pixels was a terrible choice who let me do that let's try three hundred that's better alright but it's sort of like great he did it once thanks dude that was really helpful Cyril you're doing great so maybe we'll just tell him to do this like infinitely infinite it's really hard word to spell and then he can do that over and over and it's kind of annoying because it repeats in a strange strange awkward way so we'll be like okay just do that like alternate reverse if that's cool with you and then he's like all right back and forth I got a dude because my cat calls me dude that makes any sense at all but like you know we can do some fun things like that and we can get even crazier with it if we wanted to like we could I don't know maybe make him rotate like two turns he's gonna hate me and maybe we'll rotate this piece to start at zero because you need to have like those two places and then this is going to get a little ugly helps you save it first I have what Oh there we go maybe rotate it's not two turns there's only two oh my goodness see you try to show off a little bit you just screw everything out and my point was to make something incredibly ugly and like Cyril he's Polly puking up all of his cat food right now it's actually making me a little dizzy and we made something totally ugly even though my whole point is to not make something ugly but that's still like for a few lines of CSS I mean that's all we wrote and we're really messing with that cat um thankfully we can also use this to do less terrible and annoying things oh you know what I forgot to do that whole mirroring displays thing that's the unvarying song you guys sing it to you alright so there's the Metro side so um you know we did a hole out there with Cyril made a big mess of him and I'm gonna get a lot of trouble when I get home but we did sort of prove a couple of things here there's some serious advantages to using CSS there's a really low barrier to entry we can mess with our caps in just a few lines in like five minutes and if you weren't being watched by a bunch of people you would have spelled that all correctly the first time around I would have taken like half the time another really good advantage is reusable miss you know I I joking about how long you can make your keyframes your list of keyframes but if you keep them to be a really short list you find that you can reuse them on multiple things and they become very modular like if you write one set of keyframes if we had like 10 cats like if I was a crazy cat lady and I had 10 cat pictures I could apply that same animation to all 10 cats and I would never have to write any more keyframes and then we really would have made someone throw up I've been great and then performance that's one that it gets called out a lot a lot of people are like you CSS animation is way more performant than all our other options and that's sometimes mostly true because effectively the browser is doing everything it can it's doing all the work really for CSS animations right there's no like extra library the browser's doing all the work and it's trying to do it as efficiently as possible so normally and in under like perfect circumstances yes CSS animations are probably more performant than like JavaScript maybe but there's this thing about humans we can write really bad code I mean I never do it obviously clearly I never do it and you guys never do it but other people do and if you try and animate something like height let's say that is a very very expensive property to animate in the browser it doesn't matter what you use to animate that with it's probably gonna look pretty crusty it's like it's just not gonna happen so it comes with a big huge Asterix cuz yeah there's some performance advantages but it evens out in the end and it's really more about making smart choices so the things the SS is most is most best at because that's how you say English is best at for animating the type of types of animations it does it really shines with our animations that have predetermined motion you know you saw in that keyframes that set of keyframes we created we said go from a very specific place to another very specific place and you can get a little bit relative with that but you can't ever change those two places once you write those they're there that's where it's going if you were like hey I wanted you to change your mind halfway through it's not gonna happen without a huge headache and you should probably just use something else it's really good at animating between two states that's both the transitions like we saw with that little hover and he's like woohoo I'm a huge cat now with that and also animations are really good at going like the keyframe animations are good at going from one state to the other you know if you have a situation where like well sometimes I should go over there sometimes I should go over there and sometimes you should do that like if you're ever doing this to describe your animation CSS is probably not your best choice unless you like like a lot of extra work and it's really good at having reusable motion I think I say that like four times in the next two slides like is some kind of metaphor or maybe I just repeat myself not sure we can get kind of modular with it and we'll look at um you will look at that and then our little example - there's more cats to come don't worry it's not so good at dynamic motion like I mentioned things I have to change it's not very good at at anything that has a large number of states and it's not very good at physics I do this like online hangouts Q&A with a friend of mine every once in a while and like every time there's some that the first like trolli question the chat room we get is someone who's like why would I ever do CSS animation and I can't even do physics and it's it's strange that they talk in a Mean Girls movie voice but aside from that it's like I won't hand you just want to be like oh my gosh but really that's not the correct answer I mean that's a it's it's something you wanted to you you want to animate and have physics it's a thing but when you kind of get that you know there's an assumption there that they're sort of missing and it's an easy one to miss it's usually we animate stuff with programming languages and we can do things like model gravity and add drag and you know all that kind of stuff CSS is a markup language not a programming language so it has no idea about that stuff it just can't do it and that that tends to be like a thing that a lot of us get hung up on and I know I do sometimes seem like well I can't do this oh yeah your markup language sorry CSS so yeah it can't it can't do there's a lot of things they can't do but it has friends for that CSS it's kind of nothing on its own right without its pals HTML and JavaScript it's like it basically doesn't exist especially javascript is really great at you know doing logic and knowing what kind of interaction is happening CSS knows like hover and maybe like focus and target kind of that's all it's got but javascript is really good at that so using it with other things is totally acceptable I guess much as it's cool on the internet to make pure CSS things when you're doing real work making JavaScript and CSS work together is pretty awesome and they're good friends and there's nothing wrong with having JavaScript do your logic and CSS do the motion and it's actually a pretty good it's a pretty good mix of things so taking a little break from technical stuff for a second I'm gonna say I think it was the robber who said it yesterday that he didn't really like animation I totally loved animation so we're opposite on that I actually think designers should use animation more especially on the web I think people who design and build for the web should use animation more because it's a really powerful and like just great design tool that really gets ignored and when I say things like I want to see more animation on the web people just like you have this reaction that I mean stuff like this are you gonna play are you oh yeah of course you are what done yeah yes I mean I thought I was scrolling there like now things look at stuff and it's just awful but like this is what when you think of web and animation you think of like skip intro you think of banner as and then you think of what I don't know what that is that you think of that but that's not what I mean I mean stuff like this this is a stripe checkout which you might have used if you've ever I don't know sign up for pro dribble accounts or anything else like that they actually went and redesigned their entire checkout process and their whole goal in doing it is they wanted to create a product that felt very trustworthy and very sophisticated and they decided they were going to get that across mostly with animation that was going to be their main design mechanism for getting those those feelings across and they do a really good job I mean if you went and counted all the animations and that go chat thing and you counted all the animations getting through types Striped check out you might end up at the same total I haven't added it up but it's pretty close but like these animations even though there's a lot of them they have purpose they have style they're there for a reason they've been designed and considered and that makes a huge difference because without that you have go chat and it's his friends I don't know whoever else does that he they're not the only ones so really good animation has two parts to it it has placed very well it has purpose and utility and it has style I'm gonna focus more on talking about style because I've been here the last couple days these guys you guys oh my god I just said to yous guys oh that's horrible you guys are super smart clearly I'm not so I think you can handle the purpose part yourself so we'll go walk through a quick little demo which of course has cats once again don't wanna get fined this is our starting point we have some content that is animating onto screen I chose content that's confirming my appointment to go hang out with cats and drink tea at a cat cafe for you that might be like some part of a news story or some data point or something like that content animating on screen happens a lot for me required to use cats like I said but we're basically at the point here where we've just quite literally animated it on we're like hey you know do a little animation and slide in fade up that's it I'm done it animated onto screen that's all we've got we're like what else could we possibly consider heck of a lot more and then we have our section and animation here and then our little keyframes to have it slide in which actually looks remarkably what I wrote for Cyril minor percent that was foreshadowing and totally on purpose mm-hmm so here some animations there and there's some pretty basic stuff but we could probably do a little bit more than that right we took all that time to animate it on and we had no real purpose or reason for doing it we're just like yep it's gonna it's gonna animate on so that's why we want to start thinking about some animation principles and strangely enough animation is existed for a really long time there's people who've been doing it for like decades and decades and there's a ton of stuff they've learned about it people wrote some books about it maybe you've heard of Disney if you haven't heard of Disney you've probably seen a tumblr about it which actually is a really good summary of the points of that book I have to say and it's not just like for you know for tumblr that's some quality content right there but there is it's pretty well known if you've read some things about animation or either of those things but there are 12 principles of animation 12 is a pretty big number I only have half an hour so I'm not going through all 12 and honestly the whole the whole list of 12 doesn't really apply to us as people who are animating with computers on screen I mean these were mostly come up became the people who came up with them were mostly old men drawing like Mickey Mouse frame-by-frame smart guy is very talented but not everything they had to say applies to us so I'm gonna take three of them from the list of 12 and apply them to our little example to show you how we can make it better the first one is timing know timing is like the key to comedy it's basically the key to like everything I think definitely the key to animation it's kind of like if there is no other principle of animation you ever understand or know that's the one to do and according to the the super smart old guys at Disney timing is the thing that makes objects appear to obey the laws of physics obviously they don't really because in film and on computer screens there is like no gravity or anything like that so it's not real physics it's appearing to have physics appearing to obey the law of physics a kind of more nuanced definition of timing and sometimes this part of timing is called spacing is the idea that timing also conveys things about the emotion and intention of the thing that's moving you know something that moves really fast has a lot of energy something that moves really slow might be heavy or maybe it's sluggish maybe it's tired we have this tendency to kind of humanize everything we see and we try to like figure out why it's moving the way it is so as designers we should maybe like put the Y in there sort of just like picking things randomly so timing is super important but if you've ever looked at the CSS timing functions you'll notice we have a very short list so that's like five things to cover all that important really good communication ground yeah probably not looking like it's gonna work so well that's why we have a thing we'll call cubic Bezier which is basically what saves CSS animation and makes it something you can actually use if you care about how things look which of course you will do I usually describe keep it busy functions as being number barf but I assume most of you look at a list of for Commerce comma separated numbers and c2 XY coordinates because you're super smart and that's exactly what they are they're basically the two black points there those two control points of where those are when you look at a motion graph of CSS of you know easing when when you plot the progression of the animation against time with the CSS easing functions and kheema cubic Bezier functions we can use start and end are fixed and we just change those two control points to get different curves and it's pretty cool we can get a whole lot of things this is what allows some people who did more work than us and we're smarter or you know did some work for us really to do things like get the equivalent of the pen or easing equations and CSS as well so they've already figured out the cubic Bezier values you need for those you let's do any work or if you want you can go crazy and make your own custom cubic Bezier by dragging the handles extra office fun you can race two different kinds of easing against each other fun trick spoiler alert it's always a tie what do you if your co-workers aren't here you could totally like get if like I don't know free coffee out of that so everything is better than cubic Bezier is better with cubic Bezier is pizza cereal whatever especially animation so let's see some cubic Bezier like cooking show style and we'll pick one for our little message box guy I picked that one up atop my head it's like oh yeah I needs point one five seven no that's not how I picked it and this is what he looks like with that easing looking a little better so far that's the curve of the easing that we use you'll notice that actually goes up past its destination and back so I've been really sneaky and actually just used to animation principles besides one when you go and overshoot your destination it's called follow-through and basically the idea is that you have so much energy you pass by where you're going and you're like oh yeah I'm back and just doing that little bit which we can totally do just by changing our easing function which is kind of amazing we just get that more energy of like oh I'm so excited to show you your reservation hey and it really changes things even though he's still probably moving a little too slow and I put him there twice not really sure why so what I like to do is a nice trick is set my cubic Bezier to be fast variables partly so I can look really smart see that looks way cooler doesn't it yeah and also because this is a heck of a lot easier to read than a bunch of lists of cubic Bezier numbers like I know what those are I know when I'm reusing the same one I read words better than numbers personally so let's get a number three which would be a secondary action and this is one web designers have a tendency to really totally ignore and it makes me kind of kind of I don't know I sort of laugh about it you ever seen like a sliding carousel on websites there's like a photo and text a like a box behind the text do they all move together like this then they like go off and like the the text and the image both leave the screen and then they come right back on in the same place and you're like why are they all moving together like they're attached doesn't like they're separate things right yes it's really a secondary action of the idea that any supplemental action to the main action so that's things like usually when they talk about cartoon character it's like the cat was walking and his tails wagging I guess he would do that more with a dog than a cat but like I said fines with a cat that's a bad thing with kick dog it's a good thing just that secondary stuff that is reinforcing what's happening creating more of a mood but is it really integral to the motion itself so like what if we took our little white box and pretended like his texts were you know kind of like appendages of sorts and they could move somewhat independently maybe he'd look a little bit more relatable a little bit more energetic in life like you will because I've done this already that's where these slides came from so we'll to do that to add some secondary motion I'm gonna add one more set of keyframes basically a version of a version of our slide in I'm is just a little bit shorter I changed my my first y-value to be 80 so it's moving a smaller distance and I'm gonna end up making that actually start a little later to kind of stagger the animations a little bit that's all I've added there then I'll go and add that animation to my headings my paragraphs so each of my text items is going to have that shorter animation and they're gonna have a little bit of a delay there's some extra variables in there because of code pen but you can pretend the global delay is not really there and then when we put those in here something looks a little bit more like that oh my god he's not even more Energy's a little bit more relatable lifelike and I'm sort of getting this happier feeling about my reservation to go drink tea with cats there's at least like two other people that think that's cool you can come with me oh and then as a very last step I know I said I was only gonna do three but this is a very important last step speed the whole darn thing up when we're working on animation of any emotion on screen and we're designing it and like just nitpicking it and deciding exactly what every little pixel a millisecond should do we look at it really really slow and the time it takes to read that motion as someone's seeing it for the first time it's like an itty bitty tiny tiny fraction of what it took us to obsess over that so essentially whatever the duration of your animation is cut it in half and then possibly half again and then it'll probably be fast enough so back to a couple technical things that was sort of the design half of it of like how to really get some messaging with your motion and I mean we can pull that off in CSS imagine what you can do with like more capable programming languages CSS can actually it can really hold its own despite it's strange weird secret syntax and and browsers are really starting to just treat CSS animation as like more of a real thing that people are doing they're starting to acknowledge that there are people like me out there writing CSS animation doing it a lot and who would like really appreciate some ways to debug their work I don't know I hear that's kind of cool you know for the longest time up until probably with the last six months or so if you made a mistake in any of your animation code by the nature of CSS if a browsers file line of CSS it didn't understand it would just skip it and ignore it so if you made like any of the typos I did and you didn't have an audience to tell you you would say that to your website and you would see nothing and be like there's no errors no just nothing this so you're basically left to write your own debugging tools which might sound like fun it's not so browsers have thankfully started picking up on this and making some for us chrome has this awesome thing that's actually in chrome proper where you can play pause and slow down all the animations on a page globally it is so amazing it is like the best thing ever it saved me so many hours of work it only works on CSS animations and transitions and animations using the web animation API mostly I just told you that so I could say animation like 27 times and two sentences it basically it doesn't work with JavaScript animations but on with JavaScript you get like errors and you can log things to the console so you know you're fine Firefox also has a similar tool where they have some play and pause and they actually separate out some animations as well so if you're a Firefox fan you are also totally good this one is definitely in the Firefox developer build it's probably on Firefox proper as well I don't really use Firefox the people on the other side of the office do though I'll ask them sometime chrome is also added a cubic Bezier kind of like inspector this one's only in Chrome Canary right now so it's probably a couple versions before it gets to chrome proper but like the r8 browsers are going now that's probably like tomorrow anyway yeah browser jokes like should I cut all those out no they're gonna come out anyways but you can hover over any of those like ease in keywords any of those cubic Bezier in the developer tools you mouse over any of those in the inspector and it'll give you this little pop-up and show you which curve you're using you give you some other options of nice like pre done options if you'd like them some of the like the keywords and other things you can even like arrow through them it's great and you can edit them too you can drag those handles get yourself new easing and it shows a to both an emotion graph and kind of a frame-by-frame circle onionskin thing it's super helpful and you can actually do what we are doing testing different easing and seeing how it looks in the browser itself just keep playing it over and over a change your easing you don't even have to like open a code editor it's great and what this is all leading up to you for chrome is this this animation timeline that's coming soon which i think is just kind of possibly the best thing ever it's gonna give us a little bit of you know indication of exactly what animations are taking place their duration with that black bar and then a little bit of a curve of the motion that they're using as well so you get all that information about these animations on a page right in the like developer tools it's so awesome this is technically pre Chrome Canary but if you really want to check it out I know a sneaky way to do it and I might tell you so I mean this stuff is it's really great that this is all come up in the last six months the tools that we have to be able to do this have just improved so much like it makes it so much easier because we can actually you know see what's going on both edit and create in the browser as well as debug which is a huge huge time-saver and it's it's really nice to see the browser's kind of like legitimize CSS animations in that sense and for them it's because they're going towards this like greater future web animation spec which is also wonderful but I love all this stuff I think it's it's really great so hopefully through all that I have convinced you I don't like how long is this video goodness they're showing 3d stop talking so hopefully I've convinced you guys that CSS animation is something you might want to look into or do more of or if you tried it before you want to give it a try again and lucky for you I sort of really like teaching people about CSS animation and I really like talking about it in case you haven't noticed I have a resource page on my site that lists off a bunch of things for training about CSS animation a lot of articles about you know motion theory how to make UI animation that looks good feels good all that kind of stuff basically a longer version of what we talked about today that's some stuff to check out I also have a video screencast thing that I've put together where I post tutorials of CSS animation and also review other UI animation on the web talk about what it is they're doing why it's good and what makes it good lots of opinions and stuff it's kind of it's it's pretty fun to like kind of talk through these things and say why they do things well or not and if you were super into CSS animations specifically I wrote a tiny book about it basically if you've ever read the CSS animation spec or looked at it and you're like these are not words what are you talking about that does not make sense I wrote this little book to actually put those into normal human words so that we could actually understand what they're saying because they don't use their they mix stuff up so this is the actual readable English version of it Linds read it and she liked it so it has to be good everyone's mentioned Lynn on stage so I figure I had to do it to you so that's all a bunch of stuff I put together if you want to learn more about CSS animation and I'm totally up for talking about it as well any time yeah and thanks so much for listening to me and having me at an open biz is really great