Hello.

Hello.

Testing one, two.

Yep.

The mic is on.

Great.

Hello everyone.

I am Matt Coleman.

And today I want to talk about whose job is animation.

That's the question of the day.

And when I ask that question, I'm sure a lot of you are thinking, great question.

Whose job is animation in my team?

Whose job is it?

Does anyone, do we do animation in our team?

Yeah, Frank introduced one once, I think, but yeah, it's a really tricky question.

Actually, the previous talk was a very relevant talk.

I feel like Addy probably knows the answer to this question, and it's a good one.

Look, I will tell you the answer to this question towards the end of the talk, so you have to stay here so you can find out the answer.

Now look, why do I feel like I'm qualified at all to give this talk?

Who's, really qualified?

But I do know a little bit about animation from some of my previous jobs.

So let's have a look at my career a little bit.

I started off in, at eyeview, which was a small company and we were doing motion graphics animations.

So I was, I used to call myself a motion graphics designer and I'd work a lot in After Effects.

I actually happened to find this old YouTube showreel, it's still out there, it's still going.

This was from 2010, and it only goes for one minute, go and, take a look.

Very low quality, but, good fun anyway.

And after that I had a career change, I went to Blake.

And at Blake we, we were, building games, so I was a games developer.

And that was Flash developer, and that then turned into HTML5 Canvas developer, so a lot of animation involved in that job as well.

And actually they had some Disney animators working for them, so I, really learned a lot about animation in that job.

And then as you can see, my career just slowly, gets a little bit more boring every time.

And less animation, except for Atlassian, of course, Atlassian is not boring, it's fantastic.

And, who loves Jira?

A few whoops in the room, which is fantastic.

But look, before we answer the question, whose job is it, let's talk about the what and the why.

So what is animation in the context of this talk?

I'm saying it's any movement or transition in your web app.

We'll also talk about animations and micro interactions.

They're a little bit different.

So animations are those Look at me, fancy type animations, you see them in landing pages.

And then micro animations are the smaller ones.

They're almost the opposite in a way where you click a button and it reacts with a little animation.

It says, yeah, you did click that button.

So an opposite, motivation in those two.

And then the why animation.

A lot of you are probably thinking, yeah, like, why?

Matt, why?

Animations are distracting, they're annoying, why are we talking about it?

But actually, if they're done well, they're quite effective, so I really want to sell you on the idea of why animation.

They do help the user understand.

They provide visual feedback, they can draw your attention to important elements, and they create engaging, delightful experiences.

They can really add that extra layer of quality to your product.

So when I talk about a quality product and delightful animations, I always think of Apple first.

I think they've done such a great job over the years and their landing pages are famous for this kind of animation and delightfulness.

As you scroll through the iPhone landing page today, it just moves so nicely, so naturally, on brand.

By the time you get to the bottom, you really just want to buy an iPhone, don't you?

And in fact, the iPhone itself has great animations on it.

Those gestures are really famous for the success of Apple and the iPhone.

Then we've got Canva, this animation on their homepage.

It's a bit of a gimmick, but it's fun.

And Canva actually, as a product, their whole website is full of really nice animations.

Some more subtle than this.

But always on brand and it really adds a lot to that brand.

And then we've got Netflix.

This animation is very famous.

We'll see this animation on a nightly basis.

And this one's more of a micro interaction.

We think about, what happens if that animation wasn't there?

What would happen when you hovered that card?

It would just snap and it would flash and it would be a little bit jarring.

So in this instance, the animation actually provides a smoother experience and it tries to provide less motion for you.

So whose job is animation at Apple, Canva or Netflix?

I'd love to know, is there anyone in the room from Apple, Canva or Netflix?

That's all right because we're streaming this.

And I know you're out there, I'd love to hear from you.

I'd love to hear about the process.

Or maybe there's someone in the room that can answer this question anyway, whatever company you work for.

You might say, there is a process in my team.

And again, I would say, love to talk to you after this, because we've all got different processes.

But at these companies, they're doing a really good job and I suspect that there is a process.

I suspect that they're actually strategically hiring some animation experts, probably designers, with animation expertise.

And I also suspect there's a lot going in the design system.

That seems like a really good place to focus for animation.

So how can we make great animations like the ones we just saw?

Unsurprisingly, to get good at something, you actually have to learn it.

It's a little bit like CSS.

A lot of people get frustrated about CSS.

When they haven't even tried to learn it, they just wish it bloody worked.

But for animation, we do actually have to invest a bit of time and learn the basics.

So here's a bit of a sort of Disney style lesson in animation.

We've got our basic bouncing ball.

And when you add some easing, we can see that it brings a little bit of life.

Squash and stretch, a little bit exaggerated there, but again, more lifelike.

Now we've got some lights and shadows.

Look at that shadow on the floor there.

And then finally some motion blur.

So all the things we just added to this animation are very lifelike.

They're things that happen in our day to day.

They include physics and that's what really makes the animation.

And I know what you're thinking, Matt, we don't need bouncing balls in our websites.

What are you talking about?

Stop it.

I'm sorry, I know you're a bit angry at me at the moment.

But, and, this is not the point.

I don't want you grabbing your website or your, logo.

That's not the point.

The point is that real life things are familiar.

So drop shadows, easing, physics, blur.

These are all real life things that we use in static design and animated design.

And so this is really the key in making successful animations for UI.

DropShadows are popular because subconsciously we don't even notice that they're there.

We see Shadows every day, they're just so familiar to us.

And, as you can see here in this delightful, Jira issue type dropdown, that there is a subtle shadow behind that bit of UI.

And it's a very important thing because it separates the dropdown from the background.

But instead of introducing a harsh edge, we put a shadow there because then you just don't even notice it and it works.

And no one ever questions, like, where's the light source coming from?

No one says, is the sun in the website?

Or is the light in the room, making its way into my computer?

We don't say that, we just, don't even notice it, it works.

And when we talk about, mass and gravity easing physics for animation, this is where larger things on your website need to take a bit more time to move.

Because naturally we know that big things require more force and more momentum to actually get up to that speed.

So that's an animation tip that we'll talk about later.

Now, whose job is animation at Atlassian?

I should know the answer to that because I work at Atlassian.

But Atlassian's pretty big, there's a lot of different teams, so maybe the answer is different.

I did ask a lot of Atlassians this question.

And, the survey says that 85 percent of Atlassians say they don't have a formal process for animation.

They say either it happens or it doesn't.

Some teams seem to just add more for whatever reason.

And I imagine many of us in the room today are in the same boat, where we say, I don't know how it happens, sometimes it just happens, sometimes it doesn't.

So I think we can probably do better.

Now I did ask an engineer recently, we were doing a bit of a review and I said, in this transition it's a bit jarring, maybe we should introduce an animation.

And they said, but Jira doesn't do animations.

And that 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 Jira does have animations.

The Jira board is probably our most famous animation and it's really a successful one.

We see that as you drag the cards, the other cards move and you can see where the card's going.

There's a lot of purpose and a lot of value in that animation.

And so next I want to show you a Live, a live demo of, animations that we introduced, a couple of years ago in the JIRA deployments view.

When I was working on this, page, we firstly built it without any animations.

There were no animations in the design spec, so, we built it.

But as we built it, we started to introduce animations just based on what we were lookIng at.

So let me talk you through a few of these.

I can scroll this table here, and as I scroll it, you can see that these guys on the right, they just slide in.

There are indicators to tell us that there are deployments to the right.

Now if I click this, it animates back.

Now when I first built this, the animations weren't there.

So it snapped, and it was really jarring.

And I thought, I think we should do an animation, so we introduced it and I talked to the designer about it, and I said, what about this, and they said, this looks better, I like it.

Then I introduced another animation.

If we click on these guys here, we get a pop up.

And again, nothing in the design spec, nothing in the Figma, but we noticed that, what happens when I scroll this now?

So before the animation, it just hung around, and actually you can slide this off the screen and then what happens to that pop up?

So now we're really dealing with edge cases here and, if a designer had thought of this, it would be quite impressive, quite visionary for them to think about all the edge cases here.

So actually my expectation from the designer is not that they would have thought of this and that you can only really see what to do after you build the first iteration.

So what I did with this one is I thought I can either stop them from scrolling altogether or maybe I can use an animation to subtly fade this out.

So when you scroll to the left it flies off to the right.

Almost like the wind's blown it away.

And if you scroll the other way, then it slides off the other way.

So it follows the momentum of your scroll.

And also you can scroll up, so if you go up, then it flies up.

And actually, if you scroll down, it flies up.

How did we come up with these directions?

It was all trial and error.

And actually my instincts were always wrong.

I would always slide it the wrong way first.

And then you just notice that it doesn't feel right, so then you slide it the other way.

So this is really a collaboration there between the engineer and the designer.

Now here's another example that we did recently where a designer did a loom review with the team about some improvements that she wanted to see in, for the animation, this was for the new Figma integration into Jira.

Let's take a look.

[woman's voice] Hey, I just wanted to give some feedback.

I don't know if it's ready for feedback yet, but just some early thoughts on the animation and like how this loads in.

So I'm just wondering whether it's possible, to do two things.

So I guess when the design section like slides into like kind of the Slide?

Does that make sense?

We do it with the dev panel, I know.

It's still a little jank, with just different things loading in at different times.

And if we just look at that animation, it is very similar speed throughout the whole time.

So I am wondering, firstly with the load in, if we just Okay.

Okay, this prototype is being very slow.

But see how it the section opened up like that, and the card loaded in?

I'm wondering if we could do that, and then also with the actual loader itself, I'm going to link to the actual thing because the, I don't know, my computer's being slow, there's a bit more of an emphasis on the spring before it hits either one of the logos, so yeah, I've been wondering if we could tweak that, I've got the, prototype, animation settings like here if that helps, but, Yeah, I'll put all the links below.

Just wondering if we could do more to make it like less janky and help with the easing in.

[Matt] All right.

Thank you, Jade, for that review.

And we're very lucky to have Jade in the team because Jade just so happens to be a designer that cares about animation.

And, Jade also happens to know how to make animations in Figma prototypes.

So you can see here, the curve that we're looking at, this is great.

It's got some values that we could copy paste and plug straight into a JavaScript animation library to replicate exactly the right animation.

We can also notice that talking about animations is quite difficult.

You can see that Jade uses a lot of hand movements and says, Oh, it's just not quite right.

It should move a bit more like this.

So it is difficult to explain what we want.

But, we're really lucky to have some designers that are skilled in animations.

So again, whose job is animation?

We can see from those two examples that both designers and developers really have a role to play here.

And it also feels like in those examples that we just got lucky both times.

Lucky that there was someone in the team, whether it's the engineer or the designer, that knows a little bit about animation or that cares about animation.

Teams don't necessarily have anyone in their teams that know about this stuff.

It's not really a requirement to start working on UI.

And that makes me think that many of the great UI animations out there exist from pure luck, that just happens to be a, a keen engineer or designer on the team who in their spare time goes off and Google's animations and plays around with it and is really interested.

But, I think we can probably do better than luck.

Once we establish whose job it is, then we can really start focusing in on the process and make sure that it happens in a less lucky way.

So let's look at some more examples.

This is FigJam.

I remember reading a blog about this animation and it was a, it's such a great read because this was from a very passionate engineer who was so excited that they finally got this animation perfect for the sticky note, they described every frame is perfect, the shadow is just perfect, that curve is perfect, and it made me think that they spent weeks doing it, but they nailed it, in the end it's perfect, and it's so worth it.

Definitely a collaboration there between the designer and the developer.

This one from Airbnb, I remember this from a couple of years ago.

It really struck me when I first clicked that new search button and it morphed into this bigger search.

When I actually recorded it and went frame by frame and saw, okay, I think maybe frame emotions used here cause it's doing this morph.

Again, must've been a collaboration between the designer and the engineer.

This was another example, that I built when I was working for DraftStars.

And, this is about sort of auto selecting a team.

And when we built it, the logic was really difficult and we were really excited to finally use it.

And then when we clicked auto fill, the team just changed and it fell really flat.

So again, this was an indication that we need to do something here to make this feature a bit more exciting.

We collaborated with the designer.

We came up with this.

And, it's still there today, we heard directly from customers that they really love this animation, it gives them the excitement that they're looking for.

So again, whose job is animation?

And I'm finally going to tell you the answer.

Let's have a drumroll for the answer.

It's everybody's job!

It's your job!

It's your job!

Sorry, I know, that's a lame answer.

I retract that answer.

I think the answer is, a bit more, probably around something like this.

And for every company, it's different.

If you do have a solid process, you might have animation people working for you, but if you don't, and you're not sure what the answer is, then maybe this is the answer that there is some overlap between the designer and the developer.

And this is where animation comes into play.

And of course the risk is that when it's everyone's job, it's also no one's job.

And maybe that's why we forget about animation.

I think it's your job, you think it's my job.

But then on the upside, if we collaborate together, we can create some really amazing things.

So if it's both the designers and the developers job, I have some tips for you.

My first tip is to encourage designers without much animation experience to fill that knowledge gap.

You can research micro interactions and learn how to include animation into Figma prototypes.

Likewise for developers, encourage developers without much animation experience to fill the knowledge gap.

Learn about CSS vs.

JS animations.

Explore JavaScript libraries.

Timing versus springs.

There's heaps to learn and it's really important that when you do have to make an animation you make a performant one.

Also we need to empower the devs to suggest animations and to collaborate and iterate with the designer.

I think this is really important because the devs are usually the first person to see the thing working.

And if you can quickly identify that it works but something's off, then you should be able to speak up and start the conversation and introduce an animation.

I do think we need to add some animations into the design system.

At Atlassian we do have an AtlasKit Motion, which is a good start, but, building on that will ensure that the animation gets, scattered around your website and you can focus on making really nice animations there.

And lastly, we should introduce a process for animation.

Whatever that may be, it could be a really lightweight documentation that says, Hey, After we build the thing, we do a quick animation sweep.

That's probably enough to get started.

Okay, so because we know it's designer and developer, I've got some hot tips on both categories.

Some design hot tips.

My first hot tip, is to iterate on the animation with the designer.

And my hottest tip of all is to record the experience in QuickTime.

And, I'm going to give you a live demo of what that might look like.

Okay, so let's look at this one.

This was something that we built recently in Jira.

And if we just run it, we're just looking at the experience.

Okay, whoa, did anyone see a flash?

Now, I suspect this happens a lot when we start, when we're on the web and we're looking at things or we build things.

It happens a lot, we go, whoa, I think I saw a flash.

No, I'm crazy, I didn't see it, don't worry.

But usually you're not crazy.

There probably was a flash and we, and as many times as you play it, you'll never be able to understand what happened because it happened too quickly.

So we need to record it in QuickTime and then if I use my left arrow key, I can start scrolling back slowly and work out what happened.

So let's go forward, okay, there's the flash.

Now I can go back and forth and say, that's the annoying flash I saw, maybe there's something I can do about it.

If we go forward, there's another flash.

This image wasn't preloaded.

So it flashes in.

Immediately we can understand what the fix is.

We need to preload this image so it doesn't flash in.

If we go forward again, there was another flash.

I'm not happy with the flash.

Let's look at it.

There it is.

So this blue trolley flashes and then another trolley fades in.

Surely we can do better there.

There's two trolleys, they just need to play a bit nicer together so that there's not a flash.

And we can only work that out when we record it and go frame by frame to work out the problem.

And it's totally worth doing.

Hot tip number two, think about where the elements live in physical space.

So you could cut out some paper if that helps.

I don't do that very often.

But, even some of these ones with the hands just saying like, when I animate this thing away, what actually happens to it?

And this can be very difficult for people.

I've had this conversation before and people say, what do you mean physical space?

It's a website.

It's 2D.

Stop talking about that.

But I'm talking about, that's where the paper can come into play.

If you can't explain what happens in the animation, It's probably a crap animation, right?

So we need to start thinking about, okay, when this pops out, that's where it lives in 3D space, so maybe that can help.

Hot tip number three, make your animations quick.

If you're new to animation, I think our default duration is often one second.

Just because that's a nice round number.

That default is too long.

A better default is probably 0.2, 0.3 seconds.

Make those animations snappy.

Unless of course the elements are very large, like a full screen modal, you might need to give a bit more time to that one.

And, hot tip number four, don't make people sick with your animations.

And stay on brand.

The first time you discover the elastic or the bounce animation in CSS, it's very fun.

We like to use it a lot, but you probably shouldn't ever use them.

They're a bit crazy, depending on what your brand is, but stay on brand and don't go too crazy with it.

All right, developer hot tips.

Number one, CSS is great.

CSS is your first go to option, either the animation or the transition property, they're both very, they're fast weight and they're, performant.

For JavaScript animations, use inline styles, that's the style attribute, they're very performant.

And if you desire, complex animations often, then you should reach for a JavaScript animation library.

Something like Framer, or GreenSock, or Lottie for more complex sort of character animations.

And Framer actually uses springs for its animations, so if you haven't heard about springs, go and read up on them.

They're physics based animations, I'm a big fan, so go and check it out.

Okay, how are we doing for time?

How are we doing for time?

Nah, no time.

Seven, oh, seven minutes, okay.

We could do a code challenge.

Alright, let's see if we can find the code challenge.

I was actually planning to, to run out of time, but there's time, so it's fine.

I didn't make it up, it's still there.

Okay, look, I made this little code challenge because I wrote some very similar code once in my life.

And it went to production and it caused a whole lot of problems.

So this code is, it has problems.

And that's the code challenge.

Now if I run it, you can see this loading bar.

It animates very nice and smoothly across the screen, it looks like it's working very well.

So there's, surely there's nothing wrong with this code, but in fact there is something wrong with this code.

Any guesses from the audience?

I'm not looking for guesses, I'm looking for, answers.

Goes forever.

No, it doesn't go forever, I think I've got an if statement in there somewhere that tells it to stop.

Any reason why this might cause a performance problem, this code?

Yes.

Number of styles exploding.

Absolutely, that is the answer I'm looking for.

What happens here, because we're using styled components, and styled components are amazing because they can dynamically generate classes on the fly and when Styled Components came out we were all amazed how this could actually work in real time.

But what we're doing here is we are asking 60 frames a second for a new class to be generated, pushed into the style sheet and rendered.

And I can't believe it actually works.

But at scale, it really struggles and it's a bit of a disaster.

So actually at Atlassian we've moved to compiled CSS, which is trying to combat a problem like this where the styles are generated at compile time and we don't put the runtime strain on it like this.

Look, this is just an example of animation challenges that we have on the front end.

And I thought, for the front end track, we'd appreciate a code challenge.

Congratulations, sir, your prize will be sent to you, shortly.

Okay, to finish, this is a bit about me, look, I love golf and, I did get a pizza oven recently, which is a lot of fun.

If you are passionate about animation, please come and chat with me after, I'd love to have a chat.

If you don't really like animation but you like golf or pizza, let's have a chat as well.

Thank you very much.