Javascript and CSS Animations

In this video, Sadek and David Khourshid talk about David's path to becoming a CSS Animations expert. David also shared a few tips on how to make clean animations and why they still have a role to play in website UX.

Highlights:

• David started working with HTML and CSS when he was at music school when he had to build a website to promote himself as a musician.
• He got into animations afterward and saw them as the most creative space in frontend development.
• Key tips to make animations look lifelike:
  You should always animate two CSS properties - Opacity and Transform. Otherwise, you'll have performance issues and awkward layouts;
  Animations should be short and concise (~ 300ms).
• When should you use animations? Animations are great at drawing attention to the areas of your website that you want to highlight and for rewarding visitors for correct actions. Don't overuse them, but they can play a key part in great UX.

Resources:

• Learning about Animations: go to David's series @keyframers where they create cool animations in Livestream with CSS (and maybe a little bit of Javascript)
• David's first Weather animation
• David's CyberTruck smashing window animation
• Animating Layouts with the FLIP Technique on CSS Tricks
• David's video series @keyframers

Sadek: Hi, David. You're here because you did your talk at dotCSS, right? We thought it's a good idea to invite you in Prismic Studio. You do work on CSS and JavaScript, especially you do a lot on Animations. It's interesting for our users, so it made sense to get you here. When did you land in Paris?

David: I came to Paris two days ago.

Sadek: Two days ago. How did you come, took a plane?

David: I did, yup. Long plane right, I live in Orlando but I had a connection in Mexico. So I had to come from Mexico all the way here.

Sadek: So you're jet-lagged? Or not anymore?

David: I don't know. I had enough coffee, so I think I'm good :).

Sadek: Okay, so, first, what got you started with JavaScript and CSS, and all of that? How did you get started from the beginning?

David: From the very beginning, I was actually in school for music and one of the last classes was we had to make a website from scratch, but they wanted us to use this drag-and-drop interface called iWeb, if you remember iWeb, but I didn't wanna do that, I wanted to do it all by hand, and so that's where I learned HTML and CSS, and eventually JavaScript.

Sadek: So you had to do a website for doing what? For composing--

David: Oh, so not for composing but for marketing yourself as musician.

Sadek: Oh, okay, just that, okay.

David: Yeah, and then when my teacher saw that, he said, "You should do this as a career."

Sadek: You're in the wrong place.

David: Exactly, plus, it makes a little bit more money than being a musician.

Sadek: But you still do music, right?

David: Yeah, I do. I play the piano.

Sadek: Cool, and then what? What happened after this revelation?

David: So I started working at the college that I went to and we were doing a lot of PHP, a lot of web design, and after that, I joined a startup where we did even more PHP, but I got more involved in the JavaScript and the dynamic User Interfaces, and so that's what I focused on from there.

Sadek: And then slowly you started focusing on animations, and transitions, and stuff like that, right?

David: Yeah, animations I got into because of my background in music. I just see and feel things in a very creative way and Animation was a creative outlet for me, whereas working on PHP and backend, that's not really too creative, so I just wanted to play around with CSS and see what I could do.

Sadek: Right, and what was the first thing you did with CSS? I mean, the first complex thing, let's say.

David: First complex thing. There was an animation where it was a weather app where it showed you every day the weather, and there were animated clouds and things like that, but when you hovered over, it would switch to the day and then cloud would just stay still. It was this really cool illusion effect where it showed it's sunny, cloudy, rainy, and all of that. And so I posted that animation on CodePen and a lot of people actually liked it, and they were sharing it all over. I was like, "Okay, maybe I should do more of these."

Sadek: Right, you mentioned something, illusions, because when people get into animations and transitions, they always think about doing it like in the physical world, but mostly there's a lot of tricks and illusions that you have to play with to make things look more fluid, it's like magic, right?

David: Exactly, yeah, and so there's many factors that come into play to making animations look lifelike and also there's, speaking of illusions, there's this technique called the FLIP technique where if you see one element in the page that smoothly transitions to another, there's actually another trickery that goes on to make it look like it's moving even though it's actually in its original place, but then you shift it back, and then you transition it back.

Sadek: I would like to dig deeper into FLIP in another video. But, yeah, so are there a lot of these kind of tricks when you're doing animations?

David: Yeah, yeah, there are a bunch of tricks and we talk about that in the @keyframers. We do a weekly series where we just do animations.

Sadek: You know why it makes me think of magic? Because often magic tricks are like: You're kind of moving something quickly and it sounds as if it was some other movement but it wasn't. Like, you kind of move cards and suddenly you think that they moved from here to here where it's like new ones appeared and some disappeared. And these are the kind of tricks.

David: Exactly, especially if you're doing animations where you're not using any JavaScript at all. You do have to use a lot of those tricks.

It doesn't work all the time because in CSS there's two properties that you want to only animate, which is opacity and transform, and so if you're trying to animate something like top, left, width, or height, that's gonna cause performance problems, it's gonna cause a very janky layout

Sadek: What happens otherwise? I mean, imagine like I'm starting with CSS and JavaScript and I see an element, and the first maybe intuition, it's just like, okay, I will move it slowly from here to here and I will actually move the element and do the actual thing. This is what you would think of right away. That's the straightforward way, right? Why doesn't it work all the time?

David: So it doesn't work all the time because in CSS there are two properties that you want to only animate, which is opacity and transform, and so if you're trying to animate something like top, left, width, or height, that's gonna cause performance problems, it's gonna cause a very janky layout, so that's why in order to have a very smooth user experience, you have to use some of those tricks.

Sadek: Right, I noticed that now people are using more and more animations, like even in websites and apps, and a lot of our audience are people who are building websites, and there are always these kinds of debates. "Should we use animations or are they an overkill for a website? How much of animations should we use in the website? Will it be bothering for the experience? How much of it is good?" What do you think of that? Do you think animation should be used a lot or we should find the right place? Of course, this kind of debate is interesting because animations are exciting, but still, you don't want to abuse that experience.

What you want animation to serve in terms of purpose is you want to direct the user to do something, so you want a single focal point instead of having just everything show up everywhere.

David: Right, so in my personal opinion, it depends on the user. If the user decides to not have animations, there's a setting called prefers-reduced-motion where you can add a media query and you can say if they don't prefer animations, you can shut the animations off or at least dull them so that they're not as prominent. But, otherwise, animations can be a very good thing and could be a very useful tool in enhancing the user experience.

Sadek: So, wait, just you said, you can put a media query and give the preference to the user.

David: Mm-hmm.

Sadek: Oh, that's nice. Didn't know about it

David: Yeah, but a lot of websites and web apps do is to sort of use animations superfluously too, which is not always good. You have flashy everywhere. What you want animation to serve in terms of purpose is you want to direct the user to do something, so you want a single focal point instead of having just everything show up everywhere.

Sadek: Okay, that's a good rule. So the rule is "Use animations to draw the focus to some specific place."

David: Exactly.

Sadek: You want them to kind of focus on one point and that's how you transition from one focus point to another focus point.

David: Yeah, that's the purpose of animation.

Sadek: Okay, I like it. I think hat's a good rule. So anything that distracts is not exactly good.

When you do animation, you want it to be short and concise. You want it to be around 300 milliseconds or so

David: Right, yeah, I mean, have you ever played with an app or a website where there was an animation you said, "Oh, that looks cool," the first time, but after 10 times, you're like, "How do I turn this off? "This is very annoying"?

Sadek: Right, right, yeah, it happens a lot. And also like when, often people abuse also simple things like mouse hover, right? It becomes like dancing all the time because you're moving your cursor and it's confusing because you can't focus on what you're trying to do. This is basically what you're talking about.

David: Right, and that's another thing too. When you do animation, you want it to be short and concise. You want it to be around 300 milliseconds or so, just enough so that the user understands what's going on. Because if the animation is too long, that's gonna frustrate the user.

Sadek: So animations, another thing you're saying, animations are there to make users understand what they're doing, really.

David: Exactly.

Sadek: If they saved, they should know that they saved. If they are like, for instance, clicking a call to action, they should understand that. The animation will help them to understand that they did what they were supposed to or what they intended to.

- Right, and that's why I always say, too, animations prevent these "jump shots", where you do something and then immediately the view changes, just like that (or something disappears) and then the user is confused. It's like, "Where'd that thing go?" or like, "Well, what do I do next? "What am I supposed to focus on?" But instead, if you have a smooth animation, then it's going to help guide the user.

Sadek: Cool, now imagine I am interested in doing that, having a career in animations like you did, how can I get these guidelines? What should I read? Where I should go to be able to understand what is right about doing animations? Because when you get into that world, first you want to animate everything because it's so amusing, right? And then you need to kind of build that experience of this is the right thing to do and this is probably not right. Where would you advise people to go to learn about these kind of things? You have a podcast or a series?

David: Yeah, yeah, so we have a weekly livestream called the @keyframers, where we take animations from Dribbble or from other sources and we try to make them using HTML, CSS, and maybe a little bit of JavaScript. And so we do talk about these guidelines on the show, but, honestly, a lot of my inspiration comes from people like Rachel Nabors, Val Head, and Mary Lou. They have written books and have a lot of talks on just proper animation guidelines and techniques.

Sadek: Do you see some products today that you think they do animations right? On the web. Like things you say, "Oh, I like how they do things. "They're really trying to do something clean."

David: Yeah, two of my favorite examples are Stripe and Square. So Stripe, if you go on Stripe's homepage or any of their documentation pages, I love their animations, I mean, they're famous for their design. You know when everyone tries to copy you, you're doing something right, and so that's the case with Stripe. And with Square too, everyone has interfaced with the Square payment system at some point in their life, or at least a lot of people have, where it's just a very smooth enter your card, it shows you in nice animation. It's like, all right, here you go, your order is placed, sign here, all of that. And it's a very clean user experience, and that's why when you're using a product like that, you have confidence in it, and companies use it because they're like, "We are offering a premium product" and so that's why animations provide that sort of clean feeling.

Sadek: Right, but it's a lot to learn, right? It takes several years to have that kind of experience and be able to have that judgment on "this is the right way to do or this is not".

Honestly, when I see a website or a web app without animation, it just feels very rigid, and it feels like it's less quality, but also it feels like I'm going to be more confused about what I need to do next.

David: Right, and one of the problems too is that with a lot of learning today on the web, there's not too much focus on animation because animation is seen as the sprinkles on top. Like just the nice stuff that you add at the very end if you have time, which, I mean, no one ever has time. We're always working up to deadlines and even skipping deadlines, so sometimes animations are just forgotten.

Sadek: Or just done very quickly at the end of the project, "Oh, let's add animations". Instead of being part of the UX experience and part of the UX thinking basically.

David: Exactly. Right, and depending on how you built the project, adding animations can actually be difficult, which is another reason why they're forgotten.

Sadek: Did you ever try to take some good websites that use good animations and remove the animations and see how it goes?

David: I have not yet, but I can imagine that it can show how much animations are, subtle animations, are important in these kinds of cases. How much they bring in the UX because maybe we don't feel it.

Sadek: Right. It becomes, like, we don't see it, but they are there and they do their purpose.

David: Mm-hmm, yeah, and there are ways to turning animations off in websites and, honestly, when I see a website or a web app without animation, it just feels very rigid, and it feels like it's less quality, but also it feels like I'm going to be more confused about what I need to do next.

Sadek: All right, so maybe in the next video we talk about some of the tricks that you talked about for doing animations.

David: Sure.