Lessons Learnt from Building Interactive React Applications

Rate this content
Bookmark

When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs.

35 min
14 May, 2021

Video Summary and Transcription

Animations can enhance the user experience and provide context in interface design. Using frame and motion in React can create smooth fade-in effects and improve navigation. Optimistic updates and instant comment appearance can eliminate waiting time and improve user experience. Motion can be used in multiple ways to give context and enhance user experience. Accessibility and performance should be considered when implementing animations. Choosing the right library, such as frame of motion or React Spring, can simplify animation implementation. Animations can enhance perceived performance and influence users' perception of speed.

Available in Español

1. Introduction to Interface Animations

Short description:

Hey, I'm Sid, and I do a bunch of things here and there. I've been exploring what makes an interface good to use. Animations can be used to give the user context when used tastefully. Let me show you an example with my social media website called Saturday. The interface currently lacks smoothness, so the first improvement we'll make is fading in the elements.

Hey, I'm Sid, and I do a bunch of things here and there, so I've just put all of it on the screen for you. But what I want to talk to you about is the work I've done at Code Sandbox for the last one, one and a half years. And most of that work involved around the front of the front-end and I was focused on animations, design, gestures, drag and drop, those sort of things.

And I want to kind of ask you this question. What makes an interface good to use? So this is what I've been exploring for the last year now. And there's the common answers which is it should be well-designed. It should be minimal. No clutter on the screen. It should be fast so that when you use the UI, it appears snappy, it loads quickly, there's feedback. But something that gets ignored often is the use of motion or animations to help you out. And animations get chucked into this category where it's for whimsical websites or it's, you know, if you're making a movie or a game website, then you might use it. But I'm here to pitch that animations can be used to give the user context when used tastefully, and you definitely want them in your professional websites as well.

So enough talk. I'm going to show you what I mean. So I built this social media website sort of thing. It's called Saturday, and the logic is that it's only open on Saturdays. And so this is my, this is my feed. I have a few posts from my friends, and let me show you what that looks like. So when I click on a post, it kind of just opens. It just appears. And then there's this reply that appeared. And if I click on the second one, it goes to the feed page. It goes to the post page and you can see the URL changing and it just kind of appears. So that looks a bit odd. Let me go, let me go full screen on this. And then the replies also just, just suddenly appear. So, so that's not really a good, good feel like this is an interface that you're interacting with. It doesn't feel smooth. So the first thing that we'll do is fade these in. And that's, I think that's a pretty common thing across the web.

2. Using Frame and Motion for Fade-In Animations

Short description:

You can use frame and motion for CSS animations in React. By using motion.div, you can define the initial and animate states of an element. This creates a smooth fade-in effect when opening posts and comments, providing a sense of context and change. By implementing this fade-in effect, you can enhance the user experience and improve navigation between different sections of your website.

You see it pretty often. And you can, you can do the, you can of course do any of the examples that I show you with CSS animations. But I'm going to use frame and motion for my examples just because that's what I've been using for a while. And if you're already in React land, then you should definitely check out frame of motion if you haven't.

So the way frame of motion works is that you can take any element and I can say motion.div. And if you use style components or something similar, the API is similar to that. Where you can basically get any element out of motion and use that. I'm just going to use motion.div because that's what it was. And because I'm using a component library here, I'm going to pass it to the as prop and that's just to show that frame of motion can combine well with your component libraries. So it gives me access to these two props. The first one is initial and the second is animate. And I can say what the initial state is and what should it animate to. Of course, there are a bunch of other props, but this is enough to get you started.

So now when I open a post, it fades in instead of just appearing, which gives you this subtle feeling of that something has changed. There's some context here. Even the first post, even though it's just in place, just that tiny flicker which fades in gives you the feeling that you've navigated to a different place. So let's do that with our comments as well. Because right now the comments or replies just kind of pop in, just like appear. They don't really do anything. So I'm gonna change my branch because I've already written the code for it. Let me stash this and go to this branch, fade only. So this is my branch where everything fades in. And you can see when I go from one post to another, the replies fade in subtly. And this is, this is good. This is not great yet. Another place where you can see this is if you have new posts, then they kind of fade in and it gives you a sense of that something has changed even though you've kind of lost your position there. So let's do something about this first. I'm gonna reload. And this is a common pattern that you also see on Twitter and I'm sure they have the reasons for it. When you load more posts or when they choose to load more posts for you, the posts appear in front or they fade in but you kind of lose your position of where you were.

3. Improving Feed and Comment Interactions

Short description:

And it's especially annoying when you were the one who initiated it. I'm going to remove this feed from opacity zero to one and instead use the layout prop. Now when there are new posts, all of these elements move down to make space for this new element. The original post gets shifted down, giving you the context that these posts have come from the top. Now let's talk about these comments. I'm trying to simulate that there's an API request going on. The bad thing is that it doesn't really lead to a good interaction for the user.

And it's especially annoying when you were the one who initiated it. So you kind of just lost your position in the feed. So I'm going to go to my feed and suggest this change.

I already have frame of motion here. All of these elements, each one of these list elements is already a motion.li and I'm going to remove this feed from opacity zero to one and instead use the layout prop and that's it. Just say give me a layout animation and what that does with frame of motion is that it tells frame of motion that all of the elements which are siblings or have the layout prop, animate them together. It's hard to say.

So let me show you what that means. Now when there are new posts, notice what happens to these cards. You see they got shifted. Let me show you again, cause it's easy to miss. So when there are new posts, all of these elements move down to make space for this new element. And that's kind of what layout animations give you. So when I load more post, the original post kind of got shifted down. Let me show you that again, cause this animation is really gratifying. When there are new posts, the original post gets shifted down, gets moved down. And I think that's a brilliant way of doing it because it gives you the context that these posts have come from the top and they've just shifted your original posts. So if you want, you can scroll down and still find your posts. And it's especially nice if the first post that was earlier is still visible. But even when it's not, just the shifting animation gives you the context that you can scroll down and find your place again. So that's, that's a really good improvement according to me.

Now let's talk about these comments for a bit. So these fade in, which is nice. And then I can add a new comment, new comment, and it kind of just fades in after a while. Do you see this like a weird delay over there? I'm not sure why. And I mean, I do know why. I'm trying to simulate that there's a API request going on. So you add a comment, you send it to an API, and when it succeeds, then you add the comment. And this is a fairly common pattern on the web that wait for the validation from backend and then insert it. The bad thing is that it doesn't really lead to a good interaction for the user almost ever because the user doesn't really care what is your server validation or what is your logic there.

4. Optimistic Updates and Instant Comment Appearance

Short description:

When leaving a comment, it should appear instantly, following the optimistic updates approach. Mobile applications typically insert comments or interactions first and then sync them with the background. This enhances the user experience by eliminating waiting time for validation. To simulate this behavior, I'm using the delay prop from Framer Motion, which allows animations to be sequenced. By removing the delay, comments can fade in immediately, improving the overall user experience.

What they want is to leave a comment on this post. So when I leave a comment, leave a comment, I want it to appear instantly because I want to be on the happy path. I'm kind of done here. And you notice that this is what mobile applications do. They always insert your comment or your interaction first and then they sync it with the background. There's no waiting for validation, it's usually a background sync later. And I think that's what we should do here and there's a name for it, which is optimistic updates, which means whatever the update we're supposed to do, let's assume it's going to pass, that's the optimism and if it doesn't pass, then we do the trickier thing of figuring out how do we show the error validation. So the error case is harder to handle, but the happy path is always good. So I don't actually have a back end for this. I'm faking it by using the delay prop from Framer Motion, which is actually useful if you're doing animations at two animations where one should come after the other. So in this case, I'm just going to remove the delay and this is what it should look like. So when you add a comment, that's not the right delay. This one. So when you now when I add a comment again, it should just fade in right away. So this is fine. I like fade.

5. Animating Replies and New Comments

Short description:

But there, remember how we saw this motion? We're using the change in position to kind of give context to the user. These replies come out of the post, giving the feeling that they're part of it. The code uses an initial y of minus 40 and animates to y of 0, creating a transform animation. When adding a new comment, it comes from the reply input box.

But there, remember how we saw this motion? We're using the change in position to kind of give context to the user. We probably should do the same over here. So let me check out to that. I'm going to stash this again. Check out to pre-final.

So, all right, there we go. That's a lot of motion. I'm going to reload. So, what I'm trying to do here is, do you see these replies? These replies kind of come out of this post. And that gives you the feeling that they're part of the post. And then they stem out from it with a delay.

So, the code for this looks like, I have an initial y of minus 40. And this y of minus 40 converts to a transform animation with a translate y, which is a good thing to animate because it's more performant. And when you go from minus 40, which means its final position, so frame of motion calculates its final position, then goes minus 40 and animates it to that point. So I'm doing minus 40 to y of 0. And I also have a height auto animation, which is cool.

And so when you open this post, the comments come out of the post. It's coming from the direction of a post, which gives you this feeling that these two are related content. So, the post comes first. And then the comments come out of it. Now, check out what happens when I add a new comment. So, if I do nothing, then it will also come from the top, like the other replies. But that doesn't make a lot of sense because, I mean, why is it coming out of the other replies? So what I've done instead is, let me show you what that would look like if I don't do anything.

So when I add a new comment, it comes from the previous comment, which doesn't make sense. So what I do instead is put a plus 20 on it and try to make it look like it's coming from the reply, the input box. So here we go. New Comment, and you see this gets shifted down and the new comment takes its place. I'm going to show it to you. Sorry, let me reload and show it to you again. New reply.

6. Using Motion to Enhance User Experience

Short description:

New reply comes from the input and gets added to the list. We're using a bunch of animations here. This is a good example of how you can use motion in multiple ways to give context to the user. On the web, we have a mix of symbols that don't really say what they mean. The Twitter app on mobile uses motion and direction to create a new context. Instagram also provides a good example of using motion.

New reply comes from the input and gets added to the list. So we're using a bunch of animations here. The first one is for the post. The second one is the replies coming out of the post and the third one is a new reply going from the form to the list of replies. And this is a good example of how you can really use motion in multiple ways to always, always think about where is this thing coming from to give context to the user. And honestly, this is, these are the kinds of things that make native apps feel more native, make more make them more smooth and nice to use when you use them with your thumb, and we can do all of that on the web as well.

All right, now I skipped one thing that I should talk about. There's this pattern. Actually, you know what? Let me first show you Twitter. So I'm sorry, I'm going to open a new tab and there's this thing that's pretty common on the web, which is when you open a new post. So I'm going to open this one. You see this back button, right? And when you press this back button, you kind of go back in history. And we all know what that means. Also shout out to Michael. But this arrow points left. Now, there's nothing on the left side, right? Here I have this shared vocabulary of three dots. Means there's a menu here. There's more. So there's a menu and a heart means you're going to heart or like this post and a left arrow means back. Now, even though it's not going left at all. So on the web, we kind of have these interesting mix of symbols, which don't really say what they mean. And compare that to the, this is the app on, this is the Twitter app on mobile. I recorded the video. And so when you load a post, I'm going to load the first post. It comes from the right, and then when you press the left arrow, it actually goes to the left, right? So they have this notion of there are two screens. When you click one of the posts, the other screen comes from the right, and then when you press when you press back, it goes back there. So they're actually using motion and direction to create a new context, quite literally. And then when you click left, it actually reveals the thing that's on the left side. So that's a good example of using motion. Another one I really like is Instagram.

7. Enhancing User Experience with Motion

Short description:

When you click the camera button on Instagram, it slides from the left, indicating that there is content on the left side that can be dragged. However, the placement of certain elements, like a dropdown switcher, can sometimes be confusing and lose their intended meaning. To address this, I created a details view in Saturday, where clicking on a post zooms it in and makes it full screen. Closing the post returns it to its original position. This is achieved by rendering a selected post component on top of the original post, animating it, and then returning it to its original position.

So when you click the camera button on Instagram that was way too fast. So when you click the camera button on Instagram, it doesn't pop right out. It actually slides from the left and they're trying to do the same thing where they're trying to say that there is a camera on the left screen. So you can actually drag it out and drag it back over there to close it. And I think that's a great use of motion to actually give the user a hint that there's stuff on the left side so you can drag it. Otherwise, on a small mobile screen, how do you even tell people that you can drag around?

Of course, it's not all unicorns and rainbows. Check this button out. So this is still Instagram. So this is the profile part. There's this arrow here, right? It points down. And just from this shared vocabulary, we know that a down arrow means a dropdown or more options. And when you click this, I expected like a dropdown over here or something to come from the top because the arrow is down. But what happens is you get a switcher on the bottom of the screen. So there's no relation to why is it on the bottom. But because the iOS guidelines say it should be at the bottom so that it's closer to your thumb, which totally makes sense. But then the arrow kind of loses its meaning.

So for Saturday, what I decided to do was create a details view, which is a post view, and try to zoom into a post and zoom out of a post. And let me show you how this works. So I have selected post component and the whole idea here is that on any post, you can click it and now you're in that post. You can't scroll out of it, it's a full screen thing. And when you close it, it goes back into its original position. So even this one, which is out of the screen, I click it, it comes down, becomes a full page, and then when I close it, it goes and gets stuck under the header to its original position. And let me show you how that works. So there are multiple ways to do shared layout animations. The way I like is a bit old school, which is I have a selected post component, which is different than the post component. So when you click a post, a selected post component is rendered absolutely on top of the original post. So there's like, this is the post, and then this is the selected post. And this is the one, the selected post is the one that animates and glows. And when you close it, it goes to the old position and then stops rendering. So it looks like it's the same component.

8. Calculating Initial and Final Y Positions

Short description:

To calculate the initial Y position of a post, you can get the element and its Y position. The final Y is at the top of the screen. When closing the post, it should return to its initial Y position. This can be achieved using the bounding box and the frame of motion, setting the initial position and animating it to Y zero.

And the way I like to do this is, calculate the initial Y position of the post. So for example, this post, get the, get the element, get the Y position. This is the initial Y. The final Y of course is Y zero, cause it's the top of the screen. And then when you close it, the exit should be back to its initial Y. So I do this very imperatively. I get the bounding box and get the initial Y, and then with frame of motion, I say, initial is initial Y, animated to Y zero. I have a duration, I have a delay. I have an exit, which goes back to the initial Y.

9. Tip: Entry and Exit Animations

Short description:

You want your entry animation to be longer than your exit animation. When entering, you want to provide context, but when closing, you want to quickly remove it from the screen. Snap it back to its position, but avoid showing a long animation. Exit animation should always be shorter than entry animation.

And like just a tiny motion tip for you. You want your entry animation. So in this case, it's 300 milliseconds. You want your exit animation to be shorter than your entry, because when you enter, you want to give context, but when you close it, you want it to be quickly out of this screen. So you still want to snap it back to its position, but you don't want to show the user a long animation. They cancelled it, they want to move on. So you want to quickly get it out of there. So that's a tiny tip. Exit animation should always be a little shorter than your entry animation.

10. Implementing Drag and Snap Back Functionality

Short description:

Even when it's out of the screen, you can click it and it comes to the spot and it remembers the initial Y. Favorite Motion has drag and drop support. It snaps back to its original position based on the distance dragged. The opacity of the background changes based on the drag offset, creating a smooth interactive experience.

Now, yes. So the part that I really like about this approach is that even when it's out of the screen, you can click it and it comes to the spot and it remembers the initial Y. So then it gets tucked back there. All right.

Two thoughts over here. If you can open it like this, if you click it and it comes to the top of the screen, shouldn't you be able to push it back? And this is where it becomes really interesting on mobile because you use your fingers. So if you go to saturday.wursel.app, which is where this app is hosted right now. So if you open it on your mobile phones, you can actually drag along with me. And this is what I want to show you.

So Favorite Motion already has drag and drop support or at least drag support. So I can say drag y which sets the direction of the drag. So now I can drag it and I can just send it wherever. But I can also change the momentum and constraints. So what this does is I can try to drag a component but it will always snap back to its original position. So when I drag it, it will go back. And depending on how much I drag, the speed would be adjusted according to the distance. And this is because Favorite Motion uses spring animations.

So if I pull it really far, the speed would be faster than if I pull it a little because you want it to take the same time. And finally what I do is when it stops dragging, if it has dragged more than 100 pixels, if the offset is more than 100 pixels in any direction, I want to snap it back into its original position. And I'm handing the off, I'm actually storing the offset and state so that I can also change the opacity of its background. So check, check, check out how that looks. So when I start dragging, you'll see that you can start seeing the background slowly based on the movement. And this is one, it's to give the user a hint that when you start dragging, this is what is expected to happen, that you will go back to the feed and your card will go back to its position. But also we're using some, uh, we're using the drag offset to calculate the opacity. So the, the feedback that the user gets is based on that motion. And that creates a really smooth interactive. It really feels like you're interacting with the UI. So I'm going to drag it more than a hundred pixels, which means it will snap back into its position. Let me do that again. There you go.

11. Accessibility and Motion

Short description:

Even though we're trying to invent new patterns here, it really helps to make them closer to semantics that are already available on the web. There's a focus trap in this model to prevent tabbing to other posts. Accessibility is important, as not everyone wants motion and some users may have vestibular diseases. Frame of motion has a hook for reduced motion, allowing animations to snap to the next position. With motion, we must consider accessibility concerns and ensure that it is useful and accessible for all users.

And yeah, so this is what I had in motion examples to show you. A couple of things to remember here. Even though we're trying to invent new patterns here, like this is a zoom in and a zoom out. It really helps to make them closer to semantics that are already available on the web. So for example, this, if you think about it is really close to what a dialogue looks like. Right? And we already have this accessibility semantics for it. For example, if I press escape, it should close it and it auto focuses on this reply. But if I tab, it should go to the exit, the cross button. And when I tab again, it should come back. So there's a focus trap in this model and that's because you shouldn't start tabbing and go to the next post and next post and all the way to the footer.

Um, even though the only things visible here are these two. So I'm using a pattern that already exists to get accessibility benefits. And the other accessibility thing to keep in mind is the idea that not everyone wants motion. There are people who have vestibular diseases who would actually, uh, what's what's the opposite of benefit? They would actually hate when the animation happens because it makes them, it makes them feel sick. So, um, a good example of this is on Mac. So you can drag between windows. I'm sure you've seen this with like the fingers fight. Um, but if you go to accessibility settings and say you want reduced motion, now when I try to do the same thing, it doesn't move. It actually only fades between the two and browsers expose this to us. So, uh, frame of motion already has a hook for it. So I'm going to use the use reduced motion hook. And what I can do with this is our animation that goes expands and closes. I'm going to say if the user has reduced motion, then it shouldn't do this expand. It should just snap to the next position and same goes for the exit. And it would be nice if we do a little fade here, but that's not the point. So now if I have reduced motion on, I can click it and it goes to the top. There's no motion in the post. We should do the same with replies, but if I disable reduce motion, then I get the same animations. So all this to say that, um, with motion, we also have to remember the accessibility concerns that come with motion. And I want to say that it's, it's truly possible to have both and make it, uh, useful and make it accessible for all sorts of users because the APIs and the tech and the settings and everything is there.

12. Wrap-up and Resources

Short description:

It's up to you on how you use them. If you're curious to dive in more, feel free to check out the repository at the bottom of the last post. Thanks so much for listening.

It's up to you on how you use them. All right. I think, I think that's what I have. So, uh, if you already have the URL, that's cool. Um, I have the repository at the bottom of the last post, and you can open this repository, it has the examples and the multiple branches that I jumped through. So it has a fade example and the motion examples. Uh, the last post is about a course that I'm making about the topics. So if you're curious to dive in more, then feel free to check that out. And, uh, yep, I guess that's it. Thanks so much for listening.

QnA

Audience Response and Common Animation Patterns

Short description:

Hey Sid, that was an awesome talk. Great job. 75% of the audience said all web applications should use animations. Let's start with a question from Vasilish Shelkov about common animation patterns. The best way to learn is by observing your favorite apps and noticing the patterns they use. For example, iOS menus come from the bottom and hamburger menus come from the left. Just noticing other apps is the best way to learn. There are also common patterns across different libraries. Another question, this one's from Chris J.

Hey Sid, that was an awesome talk. Great job. Let's see the answer to the question. So you asked what kind of web applications should use animations and it looks like 75% of the audience said all of them. So people are pretty into animations. Nice. Yeah. I'm glad to see that I was expecting like a smaller number. Actually it started with a smaller number. But then it just grew and grew and grew. So I guess job done here. That's awesome. That's awesome.

Cool. Well, we've got a bunch of questions from the folks in Discord. So let's start off with one from Vasilish Shelkov. Do you have a resource for common animation patterns that are applied often in lots of use cases that can help us about easy animations in our day to day? That's a good one. So there are a bunch of blog posts here and there. I haven't seen a dedicated like a resource for which just has patterns. But I think the best way, or at least the way that I really like learning about these is just taking your favorite apps and trying to like really stare at them until you ruin it for yourself. And think what patterns are they using. And then you'll start seeing these common trends, like iOS menu comes from the bottom, hamburger menus come from the left and the background becomes dark slowly. So I think, yeah, just noticing other apps is, I would say the best way to do it.

That's a great answer. Just seeing what's out there already. And you use these apps on a day to day basis, you see these animations and just building up this internal repository of common patterns that you see in the day to day. Cool. I also think there are common ones across different libraries too. So that might be another place to look. So another question, and this one's from Chris J.

Accessibility and Performance

Short description:

Not everyone wants a lot of motion, but you can still have things like shading opacities. When creating animations, it's important to consider accessibility and find the closest native element or pattern. For performance, you can animate certain properties with help from the GPU, while being cautious of extra re-renders that can cause performance issues. It's important to profile your app and identify any extra re-renders that may be causing slowdowns.

Lee. I think you talked about this a little bit in your talk, but how do you solve for accessibility in your animations? Yeah. So there are two big pieces here. The first one is not everyone wants a lot of motion. And that's something to remember. So browsers give us away, there's that's in CSS, that's in JavaScript, called preferred reduced motion. And it's interesting because it's not against animations. It's about motion. So you can still have things like shading opacities, and that's perfectly fine. As long as you remove shaking and spring animations.

And the second one with something like animations is, a lot of these things don't have native elements. So we tend to create our own. And then trying to find the closest native element to it or a pattern for accessibility, so that you still have, you don't break screen readers, you don't break keyboard navigation. So the example I showed in the demo was the zoom in animation, but I used a dialogue as a primitive because we still have accessibility primitives for that.

Awesome. Awesome. So important to think about accessibility. And something that I think is related is we got a lot of questions about performance. So to aggregate these questions all together, what are your tips for making animations performant? And also how much is the performance impact for the type of animations that you showed in your talk? Yeah. So the short answer is that there are a few properties that you can animate with help from the GPU. So if you just look up GPU accelerated animation properties, there's a subset like opacity and transform and scale and trust. And then the rest of them perform poorly. So the demos that I showed you, stream of motion which tries to stick to GPU accelerator as much as possible. But because stream of motion is a React library, what you'll often end up with is if you're not very careful about it, you might end up with extra re-renders. And those will be the cause of your performance troubles rather than the animations that you're running. So those are the two parts, which is look up what is safe to animate and what is not. And second is, if your app feels slow, profile it and figure out which extra re-renders are you causing. Awesome. That's a very comprehensive answer and a great summary. Another question and this one's from Tanvir Singh.

Choosing Frame of Motion and Other Libraries

Short description:

I chose frame of motion for its simple API and magical feel. It hides a lot of abstraction and provides a smooth animation experience. Another library I recommend is React Spring, which offers more control over spring animations.

Why did you choose frame of motion over any other animation library and is there any other library which you would also recommend? That's a tough one because I'm not sure. Are there any other libraries in the react ecosystem? I don't know. I'm sure there are a couple of hundred of them. I really like how simple the API is and how almost always it feels like magic because they hide a lot of abstraction away from you. But the other one that I've used before and really like is called React Spring, which is still based on spring animations but it's closer to the metallic spring. It gives you a lot more control over the spring animation.

Using GreenStock and Examples of Web Applications

Short description:

I've used GreenStock and I like it. Examples of web applications that use motion well are Linear, Discord, and the Koth sandbox dashboard. Removing animations on user interaction can increase perceived performance, but using animations incorrectly or too much can also ruin it.

Awesome, awesome. We got a specific question from Jason as a follow-up here. Have you used GreenStock before and what are your thoughts on it if you have? I've used it. I like it. I end up using React a lot and that's why I end up using frame of motion with it a lot. Everything I showed, you can do that with GreenStock, CSS animation. There's no X versus Y over here.

Cool. Another question, what are some examples of web applications that use motion well? So, the ones that I'm a big fan of are Linear. Linear is this new task-editing app. There is Discord. Discord does it very well. If you're on Discord right now, posting these questions, try to use the sidebar. Look at the dozen of micro-interactions over there. And I'm going to plug Koth sandbox dashboard because that's the one I built. That's awesome. That's awesome. Gotta, you know, plug your own work sometimes. That's awesome. Cool. Let's see. I'm trying to run through these. I think I was able to group a lot of them together.

Okay. One more. Yesterday Ken Wheeler mentioned that you can increase perceived performance by removing animations on user interaction. When a user does an action, don't delay the result by animation. What is your response to that? I love that. That's a brilliant question. So, I think you can use animations to improve perceived performance and if used incorrectly or too much, you can also ruin it.

Using Animations for Perceived Performance

Short description:

Using animations can create a feeling of speed and make actions feel faster. However, excessive use of animations, especially in slow-loading menus, can ruin the user experience. Material UI provides guidelines on the appropriate speed and distance for animations. It's important to use animations tastefully to enhance perceived performance. The conversation about perceived performance is gaining traction in the developer community, as animations can influence users' perception of speed. It's a fascinating topic.

So, think about it this way. If you click something and posts are going to load and it takes a hot half a second, you could use animations by expanding during that time and that creates a feeling of it expanded and the results are already here. So that way you can use motion to speed things up or at least feel like it's faster.

But a lot of times, like you're opening a menu and a menu takes 300, 400 milliseconds to open up, that feels slow. Like you already know the next action but you have to wait for it. So, that's where you can use animations to ruin things for yourself.

So, there's a really good blog post from Material UI, which talks about how much distance should an animation cover and how fast should it be based on that. And the gist of it is if the distance is very small, like a tooltip or a menu, it should feel very snappy. But if it's a paged transition, then you want to go up to like 300 milliseconds to 50 milliseconds to make it feel smooth. So, totally with Ken. But use them tastefully and you're good. Use it too much, like everything. And you can ruin it. That's an awesome one. I love that this conversation about perceived performance is making more of an impact to the developer community. Because like from a psychological perspective, it's so interesting to me that people can perceive things to be faster or slower based off of animation. So, I think it's a cool topic. Amazing. Thank you so much. Again, please give Sid a huge round of applause in the Discord.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.