Let's Move

so hi everyone uh my name is Ben and uh today I'd like to talk about uh animations as you can tell from this extremely funny slide so we'll see a few examples um of how animations can uh improve the user experience and then we'll talk a little bit about the code behind uh some of these animations so very briefly uh I'm a user interface designer and frontend developer at stripe you might have seen that animations usually play a pretty big role uh in our products and uh well that's something I really like to uh be involved in I've been passionated um with animation for quite a while now and if my memory serves it all started with the portfolio of my friend Tim it was like six years ago um and webkit was just uh starting to support CS Transitions and team made this little vcat website where he used the ums transition to produce that little hover effect I remember being blown away by this magical new uh transition property not only because uh it was so easy to use but also because it was performing transition to the new specific value and then automatically another one to come back to um the initial stage I was extremely excited to say the least um now in hindsight visualizing a simple simplified example of this animation makes you realize it wasn't exactly the most mind-blowing stuff ever right but at that time uh it really felt revolutionary to me and I literally started to animate everything I could find uh it was my obscure flashlight period where I wasn't even thinking if um animating all the things was actually a good idea I was just way too excited for not doing it so yeah six years ago I also made some part of vcat website now don't even ask me what this kind of box actually is I have no idea uh don't ask me why producers like smoke and stuff I just don't know uh I was way too excited um to just you know play with animations U to even think about that uh now imagine how I felt when the guy who got me excited about animations in the first place made this Tre so uh I got even more more excited about animations uh and so I continued um animating all the things but I tried to be a bit more subtle um so this one was for a small teaser page for a product uh that I I I've been working on called kickoff and um this one was already a bit better because it was fast and so it wasn't delaying uh uh the access to the content it was just bringing some motion to a static uh Visual and so I continued with the same idea of um uh making my visuals a little bit richer by bringing some uh some motion uh into the whole thing so I redesigned my portfolio uh and instead of just showing static screenshots of all my icons and user interfaces I chose to animate all of them in order to make the whole experience a bit more interesting so uh I actually learned a lot from uh doing this redesign uh a few years ago and pretty much all the best practices that I'm using today to create uh good animations come from um that experience so very briefly what are these best practices so the first rule um is the most important one and yet unfortunately the most complicated one to follow but the fact that is hard shouldn't make you feel it's fine to uh make some exceptions having just one part of your animation that doesn't run at 60 FPS is basically going to kill the entire smoothness of the animation not just for that specific part um the the human ey is unfortunately extremely sensitive at that and so if you can't code uh the idea that you had in mind just by using opacity and transform it's better to try to find another idea than using expensive properties like let's say width and height for example uh the other rules are fairly straightforward um keep your animations fast animate things independently so instead of like moving one big block it's better to move uh all its children uh separately and last but not least always uh use custom easings so please no standard CSS keywords such as easy and EAS out Etc so knowing do techniques to create nice animations is just as important as knowing why and when to use animations and of course bringing uh bringing some fun to your application is a good argument per se we should not overanalyze it but still the two main reasons for me for animating things is one animation uh help understanding the flow between two states and two animations can actually make your appap feel faster all right so let's just start by illustrating the first point very quickly um so this is a mobile version uh of checkout which is Stripes uh embeddable payment form so checkout has this option that lets you remember like save your cre card info so you don't have to re-enter them over and over again now enabling remember me uh actually brings you to a completely new view and you sort of lose the context so by animating uh each part individually the flow becomes much more obvious and you get a better sense of the structure of the page and about about the elements composing the interface let's now illustrate a second point which M might be less obvious um as an animation can actually make your app feel slower um when used in a wrong way so dripbox is a small uh site product I made like a year ago so um that lets designers create their portfolio easily based on their dribble profile so um the background image here uh is actually using dribbles API so what it does is that it calls the API then it fetches the current uh popular shots it draws all of them in canvas and then it applies a gradient with a blending mode above everything so the whole thing there takes a little bit of time uh especially obviously uh loading all the shots but I didn't want to have some sort of loader there right it it's it's super gross to delay the access to the content for uh a background image basically so what I did instead was to create this tiny animation where the letters uh sort of Bounce you know because it's dribble um and by the time the animation finishes the header will usually be fully or at least mostly loaded the trick is that you don't feel like you've been waiting at all even though the the the the actual um loading time is exactly the same another example uh we check out that has this option that I mentioned earlier that lets you save your uh payment info so you just um mention your phone number you hit pay and basically that's all uh there's no there's no password or whatever now the interesting part is when you actually reach uh when you actually use another device such as um in this case my mobile phone so I just start by typing my uh email address and then stripe recognize it as uh a stripe ion so it sends me automatically a verification code with a text message so I just um enter the four digits and I find my payment form prefill with my credit card info without any kind of password Etc so that's a pretty nifty process if you ask me but I'm just showing you this flow in order to um focus on one specific part uh of this entire thing so have a look at the bottom of the screen there where it says sending code so you have this spinner and then send and then a confirmation message so this whole animation there is actually actually a lie we have no idea when the message has been sent um so why do we do that like why do we lie to our uh customers well it's exactly the same Principle as with dbox there's always a small delay before the text message actually gets delivered and so by the time the animation finishes the probability that the the message actually gets delivered is way higher and even in the case where the message comes before the end of the animation the reaction is often oh my God it went actually faster than they expected so the point of all of this is that um the actual performance of your application and the perception of your users are two completely separate things and of course the only thing that truly matters is a perception and that's exactly why uh where you should put your efforts on so to continue a little bit on checkout a big part of the reason why we chose to go for uh a CSS animation here instead of using a real video was again the speed loading all the assets for um the entire animation is extremely fast while having the same thing as a real video which would be retina friendly Etc would be extremely heavy and slow to load and of course using a CSS animation also comes with a lot of other benefits such as being super easy to it um uh you can be like SEO friendly you can make some part of the animations responsive if you want um so yeah there's a lot of benefits of using U CSS animation so I'd like to focus again uh on the chiny part of this page and explain how this small um bouncing Arrow works I know it looks trivial um but most of the time these uh these animations look completely off because the wrong approach is used used so let me just uh simplify this example in order to focus on the uh actual animation and not the visuals so most of the time what people try to do um is to apply a custom cubic basic curve on the entire animation declaration and then they try to tweak the values inside the key frames in order to reach a natural bonds Well turns out is pretty much impossible to reach something that feels just right this way so what you want to do instead is to um use two completely different and opposite easings inside the animation so you want the the square to accelerate as it goes to the left and decelerate decelerate as it goes to the right so instead of applying a custom cubic basic curve on the animation declaration we're just going to keep it linear what what's interesting here is that we can actually change and switch the uh timing functions inside the key frames so from zero to uh 50% of the animation we're going to use um an EO timing function so the square uh decelerates and then from the middle of the animation uh to the end of the animation uh so for the square to come back to its initial stage we're going to switch and use um an e timing function so the square uh accelerates that way we're not trying to fake the correct easings uh they are actually accurate now this kind of bouny Animation is pretty popular these days uh and rightly so it often makes your um your animations look a bit more natural so quick example here with this uh white box that sort of bounces a little bit before uh it disappears and then there's another B bounce which is slightly less visible here uh on the yellow selection so yeah another example um with this uh bony animation as you hover the thumnails now writing key frames every time you want to produce that tiny bounce effect is super annoying right you have to first uh name your key frames which is as we all know the most complicated issue in computer science um you you have to write the actual key frames and then use them uh as an animation which makes the whole syntax not super friendly especially since most browsers still require vendor prefixes Etc so when you can you really want to use uh transitions instead of animations turns out eventually explained this whole topic earlier better than I could ever do so I'll be quick but um cubic basic curve allow us to just do that by spef specifying values above one um so in this case the last value is 1.2 which is represented on the graph by this curve that goes above the top limit and that creates that kind of bonce effect now keep in mind that um this is sort of a hack as you're not creating something perfectly accurate but for simple animations uh it it's an AC acceptable tradeoff all right so let's move on to the next example um so this is the landing page that we used to announce our Bitcoin support So this animation shows the purchasing experience and the way you integrate it in your product which is basically just um a data attribute so yeah I had a lot of um uh recreating Vim there um so I'd like to focus again on uh just one specific part of this animation in order to cover a few General techniques um and principles so first of all and sorry about that I know it's ISSC but I'd like to highlight the fact that in most cases CSS won't be enough you'll actually need JavaScript CSS is the best rendering engine for uh animations and you should rely on CSS as much as possible now don't get me wrong it's possible to create perfectly smooth animations um in JavaScript in most cases using request animation frame but in some cases like having multiple HTTP requests during your animation while JavaScript won't be able to give you 60 FPS all the time and that's exactly where where um where CSS shines by running all your animations on a separate trade you're pretty sure to get 60 FPS all the time even if you have multiple network access if you even if you have heavy dumb manipulation during your animations now JavaScript will actually be very useful for creating and running these CSS animations so why is that well first you have access to events so by using uh transition end and the animation end events you are actually creating real sequence of animations otherwise you would have to fake the sequence by using manual delays everywhere which is not maintainable especially in a pretty big animation such as the the bcoin one another important Point um it's very easy in JavaScript of course to Define uh random delays random random values basically that you can use everywhere which leads me to the third uh the third and most important point is that by using um JavaScript you're actually sort of forced to create better results all right so let's take a small example um from the Bitcoin animation I showed you earlier to illustrate these points so the small example I'd like to cover uh is this animation on the text that explain what's going on on the right so it uses the same uh animation first to appear on the screen and then to switch to um the next slide so the principle is pretty straightforward you you want to uh wrap each letter of the text in a separate element and then you want to apply the same transition from opacity 0 to one with a slightly different delay for each element of course doing that by hand would be pretty much impossible and that's exactly why you want to use uh something like JavaScript so let's see how it works under the hood so first um I'm defining a function called R letters so in case you are not familiar uh with the syntax I'm using the new version of ecmascript here um I strongly encourage you to take the plan and uh to embrace it today not only because it's more powerful but because it can make your code uh much cleaner it's uh it's very easy to use you can use Tren pilers like Babel to support other browser Etc so there's literally no no valid reason for avoiding it today anyway so this function uh takes a dum element and it retrieves its text content then it splits the entire sentence into an array of words and for each word found in this array is going to create a span element with a letter class then it just has to uh concatenate all the elements in the array into a big string and finally it just has to replace the uh the content of the original Dum element by this big string of span elements so initially the HTML SCE cord for uh this Tex was looking like this super simple just a title and paragraph now the final generation r d resulting from uh the script we've just explained looks like this and you can see that all the letters from it just takes blah blah are now wrapped into separate elements cool so now that we have uh each letter wrapped uh in a span we just want to apply the same transition on all the ele all these elements so we just start by selecting these elements and then we create a loop and inside the loop we are just going to multiply the index inside the loop by a specified delay which is uh 10 millisec in this case so the first element won't have any delay at all and then it's going to be 10 milliseconds and then 20 and then 30 Etc and that's basically all it's it's pretty it's pretty straightforward now writing a lot of code like this is pretty annoying and honestly I've seen myself many times uh trying to convince myself that an animation idea that I had in my was actually terrible blah just because I was way too lazy to write the actual code for trying this animation so in order to fight my natural laziness I wrote this tiny helper uh that does a bunch of things like you don't have to select uh elements and that Loop over them Etc you can just pass in a CSS selector it accepts uh unitless values it automatically listens for transition end events and it also sort of promotes best practices by allowing you to only animate opacity and transform related functions so I strongly encourage you to use a library like uh my animate helper here or basically anything that won't prevent you from exploring new ideas just because the code you would have to write is painful use tools make your life easier the web is is hard enough and if it's hard for you to produce the idea that you had in mind that's bad coach the coach should never hurt your creativity it should give like superpowers to your creativity instead okay so um the last thing I want to briefly talk about is uh how to bring a little bit of uh depth into your animations so in the real wall uh nothing is flat obviously and I think that losing in uh that losing that that component in uh software design is an unfortunate oversimplification 3D actually helps a lot understanding how objects behave and how they relate to each other so it seems to be like a good idea to uh get inspired by the real world to build our apps now we tried that before right remember that horrible Trend where we were trying to imitate real life objects into our apps that's kind of the same thing as I just suggested for animations right well no it's not copying a real life object and a specific visual style is fundamentally wrong as our tools constantly evolve most of the things that we are using today didn't exist 100 years ago and will eventually disappear but physics that's not going to change right um it's not a trend it's not something related to a specific period of your life uh and I think it's safe to assume that that to assume that physics are not to radically change in the foreseeable future so let's just see two uh quick examples um of how a subtle 3d effect can improve a little bit your interface so the first one um is this shaking window so this this kind of shaking animation is not right is not it's not new right um but the what I like about this one is that it also has this Cal 3D rotation so when we use this kind of like shaking animation um it it sort of imitates the movement that we do with our head when we say no right and so I think it's interesting here to go the extra mile and also imitate the actual rotation that we do with our head so another example um with this animation as you enable remember me so the block that appears and disappears uh when you toggle the checkbox is kind of unfolding from this section and the 3d effect here really EMP amplifies that behavior and consolidates the relationship between these elements so let me simplify again this animation in order to uh focus on the interesting part which is the 3D transform uh whoa the gray looks like white here but whatever um so by default what we want to do is to rotate the bottom part in 3D and then canel the transform when the checkbox is selected so let's start uh with the HTML which is super basic uh we're just using two labels one for the remember me checkbox and then another one for the phone number the JavaScript part is also super simple uh we just attach a click event to the checkbox and we toggle an active class to the bottom part when the checkbox is selected super straightforward now the interesting part is uh the CSS obviously um so by default the whole block uh gets rotated by minus the quarter of a turn uh which isus 90° um so if you visualize it in 3D is now perfectly flat so you you basically you don't see it um so we also apply a transition uh and then we cancel the the transform when the active class gets applied to um the phone idea so let's see how it looks it sort of works uh but the transformation is applied from the center of the element which is a good default in most cases but in this specific case that's not what we want so we just have to change the transform origin so we force the rotation to start at the very top of the element instead and that's all we have our Nifty 3D unfolding animation so the last advice I want to share with you um is the most important one in my opinion don't forget that having fun at what you do is the best way to produce great results go the extra mile play experiment and be happy with what you do thank you very much [Music]