Whose Job is Animation?

G'day. I'm Matt Coleman. I am so excited to be here today at React Summit here in Amsterdam, although I'm still in Sydney. Today I'm talking to you about whose job is animation. I'd like you to ask yourself that question right now. Whose job is animation in your team? Is it always the same person? Is it a designer? Is it an engineer? Or is it nobody at all?

Now before we start, I just want to show you a little bit about my career and show you why I think I'm somewhat qualified to help answer this question. So, I actually started my career at iview, which is a video company, and I was making videos every day there in After Effects. And I've got a 2010 show reel that I noticed is still on YouTube 15 years ago, but it's still there. You can go and check it out. It's just a one minute watch.

And so after iview, I went on to Blake, and Blake is a company in Australia that makes children's education games like reading eggs. And we hired many, many great animators at this company. So I was an engineer at Blake, but I learned a lot from my colleagues in animation. Some of those were ex-Disney animators, and they just taught me a whole heap about animation basics and like all these great things just because I was interested in the topic. And as my career goes on, it sort of gets a little bit more boring every time. Less and less animation. Except Atlassian is not boring at all. It's very fun.

So, what is animation? Well, I'm saying that animation is any movement or transition in your web app. And there's sort of a difference between animations and micro interactions. So, animations are probably like flashy, look at me type things. Whereas micro interactions are like the opposite. It's just like a response to a button click or just something to tell you that like, yes, you did that. It's not trying to draw attention. It's just functional.

Now, why animation? I know a lot of people really find animation annoying and distracting. But if done well, it can help the user understand, it can provide visual feedback. It draws attention to important elements and it creates engaging and delightful experiences. Again, if done well.

Let's have a look at a great animation. So, here's the Apple iPhone 15 Pro landing page. I picked this one just because it's delightful. I know that we're up to iPhone 16 now, but I thought that this one's actually even better. But you could almost go to any Apple landing page. And as you scroll down the page, it's always just, it's so slick. You know, everything, the way that these buttons pop in, it's really on brand. It's not too flashy. By the end of it, you just want to buy an iPhone when you get to the bottom of this page.

Really effective. Canva here, this one's a little bit gimmicky, but very on brand. Canva is a fun brand. So, this sparkles that follow your mouse. It's really cool and effective. Netflix, also doing animation really well. This one's very, very famous, I would say. Some of us would see this animation daily or nightly. And it's very functional. This one's different to the others because it's not flashy. It's actually just trying to create less motion because as you hover it, there's more information to show you. And if that card just snaps in, then it would be quite distracting. So, that transition is just trying to reduce the motion there.

Whose job is animation at Apple Canva on Netflix? I actually don't know. But if you know, then let me know. I'd love to know the answer. But just looking at these brands, they're doing such a great job. And I would say that they're probably strategically hiring some animation experts in there. Either that's a designer with animation experience or an engineer or just a full-time animation expert. I think they're doing something there.

Let's talk about how we create great animations. I think, you know, if you want to do something great, you just have to start from the start. You have to learn the basics. So, let's get in there. Here's a basic bounce of a ball. Looks pretty boring. And now, we can add some easing. Starts to get more interesting, more lifelike. Squash and stretch. I learned this one from my Disney colleagues.

This one's very exaggerated. But it gives it some life. And now, shadows come in to give it more life again. And finally, some motion blur. So, we can see all of these animation basics coming into this ball. But look, I know what you're thinking. We don't need bouncing balls in our website. So, why are we learning this? I know you don't want to make your website bounce like this. Or your logo bounce like this. I know. But the point is that real-life things are familiar. So, this is really the key in making successful animations for UI.

Drop shadows, you can see one here on the Jira type dropdown. And this drop shadow around this box is what pulls it away from the background and draws your attention. Now, the reason we use a drop shadow is because it's so subtle and because real-life things are familiar. And so, subconsciously, we don't even notice that it's there. All of these things here are kind of the same thing. They're in your subconscious. And, you know, how is a drop shadow actually created? Well, when you're browsing the web, you're never asking yourself, like, where's the light source for this drop shadow? Is the sun making its way into the website? Or is the light from my room, like, somehow making its way into the website? Like, of course, that's ridiculous. But it's subconsciously just so used to seeing shadows that we don't question it at all.

So, whose job is animation at Atlassian? Well, I did ask a few people in a survey. Actually, quite a lot of people in a survey. And it came out that 85% of Atlassians say they don't have a process for animation. A colleague of mine actually said to me once that Jira doesn't do animations. That was in response to me saying that maybe we should add one into this part of the UI. And they said, but no, we can't because Jira doesn't do animations. Now, this is both a compliment and a problem. It's a compliment because the best animations are the ones you don't notice.

Now, this is both a compliment and a problem. It's a compliment because the best animations are the ones you don't notice. But it's a problem because engineers feel like they're not allowed to add animations. Now, Jira does have animations. They're all through the UI. And so, it's great that people aren't noticing them because they're just there and they're subtle and they're subconsciously, you know, there, I guess. But I want to show you this animation that I added to the Jira deployments view. And I want to more importantly tell you how it came about and how did we add it.

So, as I scroll this deployments view, you can see these indicators. They just slide in. And then there's another animation when I click on those indicators that will take you back and it will slide back to where those indicate where those little lozenges are. Now, I first built this and there was no animation in the Figma spec at all, which is fine because the designer was a fantastic designer. And, you know, I usually don't expect there to be any animation indicators there. But when I built this without animation, it was just, like, really snappy and really, like, janky and horrible. So, just adding those subtle animations in and then consulting the designer really helped.

Here's another one. When I click this popup, again, I built this without animation first and the popup just sort of followed my mouse around and it was really awkward. Like, when I did a horizontal scroll, it sort of that was an indication as a user, like, I didn't want to see that anymore. So, I chose to make it slide and fade away. And I had to, again, just build it and see it first by myself to work out if, like, this is actually making sense. So, as I slide, as I scroll horizontally, I choose to animate the popup off in the same or in the opposite direction to which I'm sliding.

So, it's like the momentum of my scroll is actually the force behind, like, the wind is like blowing it off in that same direction. And that works up and down and left and right. And interestingly, my intuition was always wrong. So, I had to do a lot of trial and error there to make sure I got the direction right for these animations. And again, I showed it to the designer after and we both agreed. Like, oh, yeah, this is heaps better. This is, like, making the user experience a lot nicer. So, that one really came from trial and error.

And some of these things have to happen after you build the first version. Because you just it would be very visionary of a designer to understand that these things will be a problem. Like, before actually seeing it. Now, I want to play this video here. This is from Jade, one of our designers at Atlassian. And Jade is talking about a design that she did as a designer about the animation of this new feature. So, let's take a look.

So, thank you, Jade. We're very lucky to have Jade. Because Jade is a designer, clearly, with some animation experience. So, you can see there that Jade's pointing us to the values of the animation. And if we were using a JavaScript animation library that accepted such physics values, like frame of motion, we could just plug them straight in and that would be exactly what Jade has designed. You also notice that, like, talking about animation is really difficult. Jade uses her hands a lot to just describe how things should move. This is something that we need to, you know, really talk about. Because talking about animation is hard. Sometimes you need to see prototypes or you just need to see the values.

Sometimes you need to see prototypes or you just need to see the values. So, whose job is animation? Well, here we can see that both designers and developers have a role to play. In fact, in both those examples, it kind of feels like we got lucky both of those times. In the first example, we got lucky that an engineer had some animation expertise or even just some interest in animation. And in the second example, the same with the designer. We got very lucky but teams don't necessarily have someone who is educated or passionate about animation. And in those teams, I suspect that animation just doesn't happen. Which makes me think, you know, like, maybe many of the web the great web animations out there are just happened by luck. Luck that someone on the team is late at night learning how to do animations just because they happen to be interested. But, you know, once we establish whose job it is, then obviously we can do better. Let's take a look at some more great animations. This is one from Figma.

I remember reading a blog from the engineers who built this animation. I'm specifically talking about the curl there on the sticky note. They were describing how they got the perfect shadow and how the timing of that curl. And it was such a great read because they were so passionate about getting this animation perfect and they were so proud of themselves when they completed it. We need more of that. Like, we need passionate people like that to make these great animations. Airbnb, this animation has been here for probably 10 years. It's still there today. I remember seeing it for the first time and I was so impressed at how that small search box morphed into the larger search box. I recorded it in QuickTime, slowed it down frame by frame, and it was just perfect. I suspect that they were using frame of motion at the time. Really cool animation.

This animation I added myself when I was working for PlayUp. This is the draft style's product. And we wanted this fun way to auto fill your basketball team or your footy team or whatever. And when I completed this feature, there was no animation and it just felt so flat. It was super boring. So, I added in this sort of flicking player thing and it just has that like one or one and a half seconds of excitement as you wonder which team you're going to pick.

This animation is still there today and the product is really successful, and the users love it. So, whose job is animation? Finally, we're going to do a drum roll, and I'm going to tell you whose job it is. Well, it's everyone's job. Okay. I know that's really lame. I don't like that answer. I retract that answer. I think actually the answer is more like this. It's sort of like in between a designer and a developer. And it depends on your team. It could actually be either or. But in my experience, it's always sort of been unspoken, and the designers and the developers have taken it upon themselves to introduce animation where necessary.

And so, the risk here is that if it's both of our jobs, then it's also none of our jobs. And often that's why animation gets completely forgotten. So, there's a few tips here. I'm going to rush through these because I'm totally short on time. I just want to encourage designers to fill that knowledge gap a little bit, like really upscale on animation and learn about it if you don't. Same with developers, if you don't know anything about CSS versus JavaScript animations or animation libraries or timings or springs, like just go and read about it and get some knowledge.

I also want to empower the devs to really like don't assume that it's the designer's job all the time. If you build it and it doesn't feel right and it feels like it's lacking motion, then go and suggest some animations or take that time to collaborate with the designer. Adding animation into the design system is also going to help with consistency, but it's really tricky. It's not always obvious how you add animation into the design system. And finally, just think about how you can introduce a process for animation so it doesn't get forgotten. Really quick design hot tips. I love this tip. Record your UI with quick time and then you can press spacebar to pause, left arrow to go back one frame, right arrow to go forward one frame. It's going to catch out those little quirks that your eye can pick up, but it can't tell what's going on. Really important tip there. I do that all the time. Think about where the elements live in physical space.

You should be able to explain your animation like with your hands. Again, like pretending that this thing is in real 3D space is going to help your animation. Make those animations quick. Your default animation should not be one second, like most people do if they don't have experience. Change your default to like 0.2 or 0.3 seconds. Make them quick. And if it's a bigger element on the screen, give it more time. Again, that element has more mass, and real life things help.

So, finally, don't make people sick with your animations and stay on brand. Some developer hot tips. Going really quick now, CSS is your first go-to option. Animation or transition, they're both fast and lightweight. JavaScript animations, use inline styles. They're really performant. If you desire complex animations, then reach for JavaScript libraries such as Framer, Greensock, Gsep, actually, or Lottie. Gsep, by the way, is free now as of like a week ago. Amazing. Gsep's totally amazing, so get on it. It's free.

Okay. Thank you very much.