With Flash set to discontinue from January 12th and the HTML blink tag obsolete, how will we animate our websites from now on? With this issue in mind, we decided to dedicate today’s show to the wonderful topic of animation! We discuss how best to tame this powerful and often misused beast as well as get into the tools at our disposal for doing so in CSS, JavaScript, and by using prebuilt libraries too. Animation definitely has a place in UI, but can easily look tacky and overdone, so we start our chat off exploring some best practices for keeping things tasteful and useful. From there, we get into a few of the technicalities of building animations in CSS, highlighting the power of keyframes as well as some of the kinks in this new feature that still need to be worked out. Toward the end of our chat, we speak about the great functionality provided by animation frameworks like React’s Spring library, animate.style, and the Web Animations API. So even though Flash is a thing of the past, there is no need to cry, because there are plenty of tools in CSS and JavaScript that will keep us building beautiful animations on our websites well into the foreseeable future. Tune in to learn more!
Key Points From This Episode:
{{addCallout()}}
Transcript for Episode 190. CSS Animation
[INTRODUCTION]
[00:00:01] DA: Hello and welcome to The Rabbit Hole, the definitive developers podcast in sunny and slushy Jersey City, New Jersey. Your regular host, Mike Nunez is off making some Bronx holiday dreams come true. With me today is our regular producer.
[00:00:16] WJ: William Jeffries.
[00:00:18] DA: Today we'll be talking about CSS Animations. Now that Flash is dead and gone and there's no more blink tag, what are we going to do? How are we going to make our websites pop?
[00:00:30] WJ: Marquee tags. Bring it back to MySpace days.
[00:00:32] DA: Marquee tags. Yeah. And like my animated construction man who just is always building a site but has never completed. I guess that's a GIF So I can still do that. Like we just cover the website with GIF, but there may be a better way.
[00:00:52] WJ: Yeah. Well, I think when people poo poo animations, because I think they get mislabeled as tacky. But animations can be a really powerful part of a UI if they're done well. I think it can be a really powerful tool for directing the user's attention if there's something happening on the page that you want them to notice, like they just got a message. If the only update that happens on the page when somebody gets a message is that a badge counter increments from six to seven in the upper right hand corner where it's not going to be noticed, then probably your user is never going to know that you just got a new comment. If that's something you need them to respond to right away, then maybe you should do something to call their attention. And personally I think an animation would be a nicer user experience than a pop-up.
[00:01:43] DA: I think the reason why animation kind of gets a bad rap is because it's just so easy to do poorly. Like if you're just playing around with the CSS Animation attributes, which there's like so many tools that you can do with CSS Animation now or Transitions as well. But out of the box, like before we started recording, I was just playing with them to refresh my memory, and I was laughing my ass off because like there are some ridiculous things that you can do very easily. Like just grow – SVGs really big and spin them around and squish them in weird ways. And yeah, like –
[00:02:20] WJ: It’s too much power.
[00:02:22] DA: Yeah. It's so much power and it's a lot of fun. But like something like you're talking about is kind of like it's like a little nudge, like, “Oh, the counter increased.” Maybe it like kind of grows a little bit or like changes color or opacity or something like very kind of subtle. It's not like the counter like grows and sparkles shoot off and like all that.
[00:02:49] WJ: Right. I mean it's like you look at Apple's iMessage. There's a lot of animation in there. You don't think about it. You don't notice it. And that's because it's well done. When you send a message, there's motion to show you where the message is coming from and it's quick enough that it's not distracting. But I think that's a powerful use of animation. Also like the way the triple dots keep your attention while the other person is typing, they don't overdo it. It's not loud and in your face. It's easy to ignore if you want to just read the back scroll or while they're typing.
[00:03:29] DA: It's kind of funny. I completely forgot that my phone had any kind of animation at all to it, but like now that you’ve mentioned it, I was just poking out my phone and there's so many subtle animations that happen. And I remember when they added those to android, because I am not an iMessage user. I'm like, “Does my phone have animation? I don't know.” And it's there as well, but I remember now like when they added it, I was like kind of very surprised and delighted by it, but now it's like kind of so subtle that it just washes over me. But it does like make the user experience a lot smoother and calls your attention where it needs to be.
[00:04:06] WJ: Yeah. It's like if a new post is going to appear on the page. You want there to be a little bit of motion to show that the thing is appearing so that you don't miss it if you're not looking at that part of the page when it comes on screen. And you want the animation to like show where the message went to, like whether it was inserted at the top or the bottom. But it is I think extremely easy to overdo.
[00:04:29] DA: Totally. And I can see this being like really useful as well when you're trying to like make a sale, like in an e-commerce type situation. Like you want the user to click on the buy button or like on the new product. Like draw them in to like get into your funnel, your conversion funnel, and like get to the next stage. Like, yes, look at the product. Yes, add the product to your cart. Yes, give us all your money. Great.
[00:05:01] WJ: Yeah. I think one thing that people find annoying is like you notice animations when they're obnoxious, right? And one of the most obnoxious animations I think is the infinite looping animation, the one that just never goes away. It’s just constantly moving. I think people see animations like that where – I don't know. There's like a little bell that will like shake every 10 seconds, and it's like trying to get your attention to get you to click on something and you don't want to click on it. So you try to ignore it, but it just keeps shaking at you. Those are the kinds of animations that I think stick in people's memories and make them think that animations are bad.
I think also the fact that when you first make an animation, by default it has linear speed, makes animations feel clunky, because linear speed always feels clunky. There's like no smooth acceleration and deceleration. So it just like starts and then it's animated and then it stops. It's very aggressive.
[00:05:59] DA: Yeah. That's kind of been my struggle with this as well. Like there's so much power with the animation. Like we talked about earlier, you can do so many things with it. But like to make it very nice is a subtle thing, and it can get a little bit complicated. There's a lot of different ways you can define the motion and the transform, like you can use key frames or any of the built-in things that are there.
[00:06:31] WJ: Cubic Bezier, or however you say that? Cubic Bezier? They're like super tweakable acceleration.
[00:06:39] DA: Depending on how fancy you are. And something that I struggle with that too is like how bespoke should the animation be. Like if we have some button, like when I hover on it, it's like calling you in. It's like going to grow a little bit and like kind of like pulse and give you like a fun feeling like, “Oh, I should click on that button.” But like I feel like there might be a bad thing if you're trying to make every button like pulse or like call you in a different way. There's definitely some argument I think to be made for like having a design system for animations or some kind of like a common language of like how things in your brand move or act. Like what is the way that those things like interact with the user?
[00:07:32] WJ: Yeah. I think adopting some kind of a framework or having a style guide for animations can be helpful so that if you're working with designers, your designers can pull from some stock animations and animation styles.
[00:07:47] DA: Yeah, because that's also like a hard thing to communicate with the designer where you're not animating everything on the page. Like everything on the page needs CSS and styling. So it's easier to come up with a common language to talk about style and like the page elements and some consistency around that, whereas like animation, at least in my practice, has been kind of like, “Oh, the designer needs to figure out like how it should feel and like go to the lab and like cook up some kind of a one-off animation.” When I think like some bounds are very helpful with this kind of thing, like setting your boundaries and being like, “Okay, like we're just going to use these kind of like ways of communicating animation,” and just leave it to that.
[00:08:38] WJ: Yeah. I think having things enter the page quickly but slow down as they're approaching the location where they're going to end up on the page can be helpful, because, one, it's faster than if you were to just have like a linear motion. Because most of the time it's fast. And then, two, because it slows down as it's reaching wherever it's supposed to be, it draws your attention to that part of the screen, the part of the screen where it's supposed to be and where you're going to be interacting with it next. And I think very felt like it's definitely a second is too long for an animation usually. So faster is better most of the time. And then I think when elements are leaving the page, they should accelerate out just the same way that they decelerated in. I think you want them to leave even faster than they came in.
I read a blog post where they referred to it as like sort of like a knight’s squire. If the knight calls the squire, then he needs to like come in running, but then compose himself as he arrives. And then when the knight sends the squire away, he should like get moving and even faster than he came. It's like your user interface is trying to be courteous and respectful and deferential to the user.
[00:10:02] DA: To arms.
[00:10:04] WJ: To arms.
[00:10:06] DA: Yeah. Like I read an interesting article from Smashing Magazine that we can link to in the show notes, and they were kind of like comparing some techniques of like traditional animation, like Disney hand-drawn animation and like how those are kind of like rooted in like physics and like the actual behavior of real things in real life. And like understanding how things behave in real life can help you design a better animation because it won't violate your expectations.
[00:10:45] WJ: Yeah. I think the most compelling animations that you see like from material design, Google's animation library from material design. Some of the most compelling animations in there are the ones that appear to follow the normal rules of physics.
[00:11:01] DA: I guess it's like kind of a rule of thumb. Like if you wanted to break the rules of physics, then that could be cool too, but like just generally for the sanity of your user, like keeping within those rules makes it easier to navigate around.
[00:11:18] WJ: Yeah, it's more intuitive, because we already know the rules of physics for the most part. Maybe not the math, but –
[00:11:24] DA: Oh, speak for yourself. I love the rules of physics. I will integrate any day. Well, maybe. Actually I don't know if I remember integration anymore.
[00:11:35] WJ: Oh! This reminds me of that yeti animation that you sent me with the login screen.
[00:11:41] DA: Oh, man! It's so cute. I love it.
[00:11:44] WJ: It really is adorable. It makes me not want to finish logging in because I just want to play with the Yeti. We got to include that in the show notes because it’s awesome.
[00:11:52] DA: You'd like type in your username and there's this yeti whose face just follows your cursor and anime like –
[00:11:58] WJ: It gets so excited about your –
[00:12:00] DA: It gets so excited as you're finishing your email address. And then when you tab to the password, he hides his eyes and it just looks like so much fun. And it's in a code pen. So we'll link to the code pen, and you can you can look at it to see exactly how they did it. And it is kind of insane. It's pretty complicated. There's a lot of JavaScript. There's a lot of CSS. There're a lot of transitions. So you may not want to do that yourself, but it did make me think how like animation is a really wonderful way to like add like character and personality to your brand. That makes it really fun to use a product.
[00:12:41] WJ: Yeah. I think that's one of those areas where there's a line, because on the one hand the yeti is very distracting, like it slowed me down. I did not want to finish doing the thing that I was supposed to do, which was actually log in, because I wanted to play with the yeti. But I could see some brands where that is extremely appropriate. Like if you're selling toys to kids or if you're like a game website, having something that's really playful and recognizable and fun, that could be a really powerful way of building your brand.
[00:13:14] DA: Yeah. Very, very reticent of Flash games if you are, but maybe not appropriate for I'll taste and like to add this to Jira.
[00:13:24] WJ: Yeah. I think you don't want to see the cute yeti on your bank login. It just doesn't make – Is this yet like covering the eyes while I enter my password, actually giving my password away.
[00:13:42] DA: Like covering the eyes of the SVG just nothing to hide the key loggers that the Russians have embedded in the website. Yeah. I guess we talked a little bit about like the technical aspect of like implementing this. Like so you decided you're going to add a giant yeti to your login screen. Yeah, what considerations do you have to take in order to make sure you’re not punishing your users?
[00:14:04] WJ: Yeah. I mean there’s performance implications for doing something that heavy. I mean Chrome has good dev tools for doing performance optimization. Like you can do recordings of the animation and see how it affects memory. See how many repaints you're doing. And like if you have JavaScript interacting with the CSS, you can see the different calls to JavaScript. And if you're getting jank where the page loads sort of jerky or moves in a sort of a jerky way and you're seeing that like page render jank, you can go through and debug it that way. But I think erring on the side of CSS over JavaScript is usually helpful.
[00:14:50] WJ: Yeah, that makes sense. I haven't used these tools in Chrome or DevTools for profiling animation performance particularly, but like I know that they have in other things really like throttle CPU and network speed, and that could be an interesting thing to like look into and see, “Okay, like if I am using like a mobile, like how does this animation respond or like how does it perform?”
[00:15:18] WJ: Yeah. And I think mobile is a really good use case for animation, because if you want your web application to feel native or to even feel like it belongs in the same ecosystem as everything else on somebody's phone, adding some animations I think can be really helpful. I mean so much of your interaction on your phone is animated. Like everything from like unlocking it to swiping to see the notifications. Like there's so much movement.
[00:15:47] DA: Yeah. Yeah. But just keep it tasteful and don't destroy your poor mobile battery. I think another thing that you might want to keep in mind on the technical side is like browser support. Like particularly with like mobile browsers, like for the most part like animation is very broadly supported, but it's always good to think about like what kind of platforms your users might be using. What kind of browsers they’re using on those platforms and what kind of pitfalls or like inconsistencies there might be and the animation tools that you're using.
[00:16:26] WJ: Yeah. There's also some weird gotchas. Like since we got key frame animations, which makes it possible to transition from like basically any CSS state to any other CSS state. It seems like basically anything is possible with CSS at this point. You can make anything happen on the page. But I ran into a ridiculous limitation that I was shocked has not been addressed by major browsers yet, which is if you're animating something that grows on the page, you're going to want the things below that element to be displaced, right? And you would imagine that they would be displaced in a smooth way at the same transition rate as the animation.
[00:17:09] DA: That makes sense to me.
[00:17:11] WJ: The browser will not re-render everything else in the DOM at a high enough frame rate to match the transition. So you have to use these kludge hacks. Like instead of animating on height, you can animate on max height, which for some reason will bypass this restriction and cause it to actually animate or re-render the things below it so that it appears to grow. But if you do that, it messes up your animation timings, because it does all the timings based off of the theoretical max height as opposed to the actual calculated height.
[00:17:50] DA: Oh no.
[00:17:52] WJ: So, also, you have to introduce a max height, which means that your content doesn't just grow infinitely as there's more of it. So there's a way around it if you want to use JavaScript. But then it goes from being like five lines of code to like 50 lines of code. And it just seems crazy. This is not supported yet.
[00:18:11] DA: Right. So be careful what your designer's asking for I guess, like it could turn into a boondoggle. Like I always – Like I mentioned before, like prefer having some kind of like preset, agreed upon patterns and rules so that we already know what's possible and we build upon that together. But even better than that, like maybe you don't have a designer and you're just figuring this out is you're trying to find like a framework or a library of animations that you can just leverage out of the box that just work.
So I know that they have this for React. There's a library called Spring that seems to have some good traction. I haven't used it myself, and there are a couple other alternatives. But animating things in react with the virtual DOM, as I understand it, is like kind of a special case that can be extra challenging. So like it can be good to like leave that to somebody else sometimes, and there are other like libraries that you can use just for straight up CSS animations. Just to keep your life easy and find something sane and just move on with your day.
[00:19:31] WJ: Keep your life easy and find something sane. Talk to your designer to see if React Spring is right for you.
[00:19:39] DA: Exactly.
[00:19:38] WJ: [inaudible 00:19:38] include maximum height in your CSS.
[00:19:45] DA: Yeah. There's this website, animate.style, that is like a library of different animations or like nice things. And if you don't have that language to talk with your designer about it, it can be like nice to like just kind of click on these different animations like, “Oh, what does a rubber band look like?” or shaking or ta-da wobble. There's a jello one. This is pretty ridiculous. I'm really amazed that any of these things are possible, but they're there. It's pretty cool.
So there you have it. Flash is dead, January 12th. No longer going to work for you, but don't cry. There's so many tools that we have in our toolbox with CSS and JavaScript to make wonderful animations on our websites.
[00:20:34] WJ: Oh yeah, we forgot about WAPI, the web animations API.
[00:20:38] DA: Oh yeah. There's so much stuff. It's so cool. But don't go too nuts. Keep it simple. And yeah, have fun. Oh, hey! Look, it's Mike. Hey, Mike, why don't you do the outro? I don't feel like doing that one?
[00:20:51] MN: Follow us now on Twitter @RadioFreeRabbit so we can keep the conversation going. Like what you hear? Give us a five-star review and help developers just like you find their way into The Rabbit Hole and never miss an episode. Subscribe now however you listen to your favorite podcast. On behalf of our producer extraordinaire, William Jeffries; and my amazing co-host, Dave Anderson; and me, your host, Michael Nunez, thanks for listening to The Rabbit Hole.
[END]
Links and Resources:
The Rabbit Hole Podcast Survey
