Emotional & Functional UI Animations in React

Welcome, everyone. So today I'm going to talk about emotional and functional UI animations in React. My name is Elisa Beto Oliveira. I'm from Portugal, Lisbon. I was born in Mozambique, of Portuguese, of Mozambican. And I'm a senior product designer. Currently I'm working for the Elastic UI team. It's a design system in use at Elastic.

And today the agenda is I'm going to first explain what is the UI animation, then why is UI animation important. How can we create animations in React? And in this part, I'm going to show a few examples with code and then just final thoughts. Sorry.

So what is the UI animation? It's basically the process of adding motion to UI elements. Also, it helps reduce cognitive load. And the cognitive load is the amount of effort that users experience when they want to do something. Also, the UI animation adds personality and charm to an interface. And also, it helps overcome language and culture barriers in interaction design.

And UI animations, they can be functional or emotional. Functional UI animations is basically the ones that can improve the UI by providing visual feedback. It improves usability, provides feedback on user actions, or also can provide feedback when the states of application changes. And the emotional UI animations is basically they can delight the user. It's a way so you can connect your brand. And the user, if it's done properly, the users can have more memorable experiences.

But why is UI animation important? First, they can provide a more natural user experience by simulating the experience of interacting with the physical object in the real life. Also, it can reduce stress by providing real-time updates and feedback. And also, it can make your UI more fun and engaging. And how can we create animations in React? Yeah, you can use just pure CSS with a framework or just the style.css. Sass, less. For my demos, I'm going to use Emotion. And also, you can for more complex animation, you can use Animation Library. And for the demos that I'm going to show afterwards, I'm using Framer Motion.

So let's see the examples. And this is like my blog website. And at the end of the talk, maybe in the afternoon, I can share this post. It's not yet published. But the idea is I'm going to show the animations here.

So this first example is a functional animation. And it's a functional animation because it provides a user feedback. Let's imagine that I could have a button like this. Let's say, no styles, anything. And on over, without any user feedback, it will be strange. You wouldn't know that you could click, only the cursor is changing. And in this one, I have a better user feedback. So when I over the button, it gets so darker, and the button goes a little bit, it slides up. So this is a good example of a functional animation. And it's really easy to achieve that. I'm just using CSS and basically on over, I have these transform translate-y. That is basically saying that I want the button to go one pixel up. And then I have this transform with this duration of 250 milliseconds and a timing function of easing out and no delay.

And now I can show a different example. In this one, there is a button that shows a line on click, and you can see, imagine this could be a nav bar. Without any animation, it will be weird because maybe you wouldn't see like on clicking or on over speaking, nothing would happen. Actually in my computer, this is pink. And there is a swing like purple, but it's pink. So when you click, this is the animation. We have like this line that expand. And to do this, also I'm using... so I have this demo component where I'm passing the exact state for each item. And then I have this button line. And in the button line, I'm using an SVG here. And this SVG is basically the line.

And then I have this CSS animation where I have this expand animation that happens in 0.3 seconds. And it has this timing function called ease in. So basically the expand, I'm using this keyframes from Emotion, but you could do the same with normal CSS. And I'm basically animating from to. So the width of that SVG, so it starts when I click, when I don't click it goes from, when I click it goes from zero and to 100%. So it's also very easy to achieve. And it's a good user feedback.

Just user notes, right now I'm on this page about, and then this is a more complex animation. So for this example, that I call a bell ringing in a header, I'm using Framer Motion. And when I click, so the bell rings. And I'm using this button, but in a real world application, this state, to animate it can come from, I don't know, API from your database. So basically you receive a notification, and the animation should trigger. So I'm using Framer Motion, and this animation is a little bit more complex. So basically with Framer Motion, you have these components, basically almost like styled components. So in this case, I'm wrapping the icon with the span. So what I do is motion dot span, and then I have multiple variants. In this case, I have two animation variants, one called active and the other called inactive. So in my active state, basically what I want to animate is the rotate, transform, rotate. So in my inactive state, I just want to say that I want to rotate zero. And in my active state, I want to rotate all these array of different degrees, zero, 30 degrees, minus 10, 28, and I just give random numbers because in the real world, a bell rings randomly. So it's what I'm trying to mimic. So I have these two variants and the active states, as you can see, I'm going to call that array of degrees. But in this case, if you notice this animation is very frenetic and we cannot forget that we have some users that can have some disorder and things like nausea and vertigo. It's called vestibular disorders. So in OSX and other operating systems, you can have this, that is part of the accessibility. You can click to reduce motion. So when you reduce motion and if I click, nothing happens because right now the user has that option enabled. But if I disable the option, it's animating again. So with FramerMotion, even with pure CSS, you have a media query called PreferReduceMotion and you should use it to check if the user has that option enabled or not. So if the user has the reduce motion enabled, you shouldn't animate.

So I check what I do is I use these useReduceMotion hook that, hello, hello, that comes from FramerMotion and if the user has option enabled, no rotation happens, it should see. If it has, if this is disabled, it goes through that array. And this is very important to do.

And then the next example, it's a functional, but at same time emotional animation. And this one I got inspiration from Josh Kamau website. I think when I first time I went to his website and I saw his blog with this cute heart. I wanted to find out what he did to achieve that. So I tried to do something similar.

So in this example, I have like two components. The first one is basically where I have two states. The user likes and the other is the total likes. So the total likes is this one, currently is one 17 and the user likes one, two, three, four, five. And when I reach five, I don't allow users to click anymore. So I'm passing those two states to the, I'm calling this component love button and I'm using framer motion. And there are multiple things happening here. The first one is on over. It gets the eyes change and it gets bigger. So basically, to do that, I'm using this react on mouse enter and on mouse leave. And I have this state is over. And when the mouse entered, I set the is over state to true. And then I can just with SVG change the eyes. If is over, I show one pet with some eyes. If it's not over, I show this arch eyes. And then there's another animation. So when you click, you can see these emojis here. So to do that, I have this array of emojis. And then I loop through that array of emojis. And then I check. So I just want to look at five likes. So if the first like, when it's the first like and this the first emoji in the array, it gets visible.

And then it animates with one of the variants. The visible variant that is basically, that is basically showing that emoji going to the top. So this is the visible animation. So basically I'm using again the translate Y and some opacity. So in this case, it goes from zero to 16 and then from 16 to 32 like this, and then I have some opacity. It goes from zero to 0.8 and then it disappears zero again.

And then there's another animation that is basically the button is getting filled out with this pink color and to do that, basically when I designed this, so I'm using a mask and the mask has this heart shape and in the mask there is a square and the square is pink. So right now that square there is pink, it's on the bottom and when I start clicking that square is starting going up, up, up, up. So every time I click, I'm just basically translating that square. So it's the zero position actually is 42 pixels, it's here, it's zero, it's here. So I want to make that square go to the 42 pixel. So when it's zero, right now it's in 42, when I click again, it goes to 32, 24, 16, eight and zero. So this was the example of a emotional UI animation.

And then this is the last example that I'm going to show. And this is a search bar that with a planet that animates. And I use this animation with one project that I did with Sara Vieira a few years ago. It's basically is there Uber in? And the idea of the project was to check in any city of the world if you could have Uber. So because the website was so empty, we only have the input there to search for the city. I had this idea, let's just put a planet representing the world and the planet could animate. So the idea is when you start writing, it animates a little bit. If you click, it spins. And also you have the eyes in the mouth that animates with the set timeout. So to do this animation, once again, I'm using framer motion. Also using use with use motion. So if I click again, the animation doesn't happen, it doesn't spin because I think it's too much. So in this case I give this option for improve the accessibility for some users. So to do that, I have this component demo. And in that component, I have three states. Researching, research complete. So basically when it's searching, the idea is it goes from 0, 5, 0, it's also rotation, minus 0.

And when it search complete, it just rotates completely. And when it's not searching, it just rotates 0. And I'm using the use effect just to check the states that comes from the parent component. So if it's searching, I have another state called planet animation. And so if it's searching, I set the variant to be searching or research complete or is not searching. And then that's basically what happens.

And then for the eyes and mouth, I don't need to use any variants. So basically, I'm just animating the scale y. So basically, it goes from 1. This is an example of the mouth. So the mouth is completely open. Then it closes to 0.1. And then 1 again. I'm saying that I want to repeat this animation multiple times, infinity times. The direction is 0.3. Let's imagine if it was 4. It will take some time. So let's put 0.3. When we load this component, there's a 3-second delay. And then every 5 seconds, the animation happens again. And so this is the example. And I have one minute.

And this is the final thoughts of the animations that I showed. So you should use that functional animations, like the one that I showed with the button, the bell ringing, and that nav bar as a way to provide user feedback. So when you have this type of animations, the idea is you don't need to do too much. Just use like micro interactions, very simple ones, just to indicate like on over a button that the button is clickable, or try to do something that represents the real world. So when you have a lot of elements in one page, don't try to do and have a lot of animations. Imagine if I had the planet, the heart, and a lot of things happening at the same time. It would be too much. But when your UI doesn't have too many elements, like in that case of the is there Uber in, you just have a text, an input text, or an input search.

In that case, you can maybe have something happening, a frenetic animation that represents your brand, for example. And when you have those frenetic animations, like the bell ringing or something that is too much, don't forget to check if the user has the reduce motion enabled. You can do that with a media query, with pure CSS. Or if you use a library like Frame or Motion, you have that hook. Don't forget about this. This is very important for accessibility.

And that was the talk. Thank you, everyone. Thank you, Eva, ever so much. Would you like to join me for a short Q&A? Let's reset that table. Someone moved it. Excellent. Thank you, Eva, so much. I found that really interesting and insightful.

Now, we have some questions on Slido. And for those of you who have joined this room since the little intro, in this track, we're going to be asking questions using the same Slido link as before. So that's sli.do in your browser. And you can use code 0212, that's the date, in order to get into the event. There are a couple of tracks. Make sure you choose the mnemonic track in order to ask questions in this track. And ideally, if you can pop the name of the speaker in with your question, that'd be great. Those of you who submitted questions and didn't, I've done it for you. So don't worry. But on an ongoing basis, that'd be very handy. So with that in mind, we actually have a few questions that were posed during your talk. So the first one is, do you have any thoughts on documenting animations in pattern libraries or design systems? Yes. I think, and this is something that we're trying to do now with Elastic UI. At Elastic UI, I'm saying, when I introduce, I said, it's a design system. But actually, it's not a real design system right now. It's just a library, because we're missing a few things.

We're missing some design guidelines. We also don't have animations guidelines. And I think it's really important, because when you don't create those guidelines, then your application will start having a lot of different ways of doing things. So imagine that maybe you implement one button, and it comes already, because it's a design system. It already has animation. But then if you, in an app, if they have to implement a custom button or a custom fly out or pop over or something, they can use any type of animation. And then we'll start getting weird, I think. Too many differences.

Yeah, absolutely. Like any component in a design system. One question, which has actually been asked a couple of times in slightly different ways, is that preferred reduced motion is not prefers no motion. But how do we know when it's too much? That's it. That's something also at Elastic UI, we have one rule that we do that for all the animations and all transitions. So basically we have one function that we wrap. We're using also a motion. And we use that to wrap all the animations. And basically the animation doesn't happen. Sometimes I think that probably these micro animations like buttons, it doesn't make a difference. I think maybe we don't need to do that. But some of these things we keep learning. And probably in the future maybe we can do some user testing. We have someone specializing in accessibility that maybe we can talk. And maybe you can try to find out is the buttons really necessary to have these? Or just, I don't know, models, fly outs, maybe those big components that appear from slide in, slide out, these type of animations, maybe only those components need. But actually I think every design system have their own rules. If I was taking my own decisions, but it's a team decision, maybe I wouldn't wrap these micro interactions.

Excellent. And I suppose with anything to do with accessibility, not just animations, user testing is really at the key of understanding best practice. Excellent. Is it a better idea to use libraries like Frame-O-Motion or just basic or vanilla CSS? My rule is, I always try to use first CSS, only when I am struggling and I start seeing, like, this is getting complex. I have to inject this class and to do this and that.

And I'm also a designer, so my JavaScript skills are not that good. And sometimes, when I start to overcomplicate, just to use CSS. That's what I know. It's better to use a library, because they're already taking care of some coding parts. And that's when I take that decision. Makes absolute sense.

Are there any, this might be a little deep in knowledge, but to your knowledge, are there any CSS properties that you find are better not to animate for either performance or accessibility reasons? We had a lot of issues, actually, with transform. Those type of transform-wise and transform-x animation, sometimes the performance is not good, especially when it's inside flex components and other components. We had some issues in some applications like Kibana. And so maybe, I don't know, maybe I noticed that, in Shakra UI, I was actually using Shakra UI for the demos. They only have these over animations with changing the background color. They don't do this button going up and using this transform. So once again, I think when we're implementing and we start having a lot of issues with those transform animations and transitions, maybe we should consider removing. And also, what are you supporting? We're not currently supporting anymore IE 11. We always do some tests, and we don't have any problem with the type of animations we're using. But I think, once again, it's testing and see what works the best.

Cool. I think you answered this during your talk, but just for clarity, how can our lovely audience today access the article with all the information that you used in your demo? So you can go to my website that has this name, MewkiMew. And the name MewkiMew, it's because I had this cat. And Elisabet Oliva, my real name, was already taken. So I'm going to buy this domain called MewkiMew. And it stays until today. I think at the time I had, I don't know, 18 years old when I did that. Yeah, but you can go there. I'm going to publish maybe at 5 PM. Yeah, I did wonder where your username came from. I really like that story. We probably have time for just one or two more. Should we refrain from having animations for negative emotions? Or how would you suggest handling this? Yes, actually I have this project, React Huawei, where I have components that are like illustrations, and they have different moods. So when it's like an error state, you can change the mood of the planet or the ice cream that is illustration, to a sad face.

So I think, yes, when you have a 404 error page, instead of just showing 404 page not found, maybe you can page not found and have like an illustration that is crying. It's negative, but at the same time, it can be cute. And maybe... Or whimsical. Yes. Yeah.

OK, I think we're just about at time. And I feel like the questions that are still being posed are similar to questions we've already covered. So I'm going to take this opportunity to, on behalf of our whole audience, organizers, and myself, say a huge, huge thank you for delivering such an excellent talk. Let's give a massive round of applause. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.