How to create micro-interactions with react-spring: Part 1
How often have you looked at the application you just built and thought to yourself “I really wish I knew how to add animations”?
I had this thought for a long time. I would build something really great, yet the interactions were minimal at best (the most I could do is a transition: background .1s linear
), yet I always wanted more.
Animations not only take your application from good to exceptional, they’re often expected by users. But animations don’t just make your application look and feel nicer, they can be a useful tool for improving perceived performance, giving users updates on the status of a task, and guiding a user through your application.
In this series, we’ll examine how to take your application from ordinary to exceptional by implementing micro-interactions with react-spring so you won’t be stuck thinking “I really wish I knew how to add animations” any more.
react-spring
For this series of tutorials, we’ll be learning react-spring.
react-spring is a hooks-based animation library, but what differentiates it from its competition is the fact that it’s also a physics-based library.
Typically we use CSS animation libraries with transition timing functions and bezier curves to animate elements in the UI. However, it’s truly difficult to make elements transition in a natural manner. Elements in real life don’t transition linearly through different states, and your UI elements shouldn’t either.
Enter react-spring.
We’ll learn more about this amazing technology in the second and third installments of the blog series, but if you don’t know React or haven’t worked with Hooks I would recommend taking an introductory course first.
What are micro-interactions?
Micro-interactions are small animations whose purpose is to delight the user by providing feedback in regards to a task or inform the user about the status of a process or task.
Here are a few examples of micro-interactions:
By incorporating micro-interactions we will take our applications from ordinary to exceptional. We can think of the structure of your application—the HTML—as the body, the CSS as the physical appearance, and animations as the body language.
Why use micro-interactions?
Here are a few reasons why you should use micro-interactions throughout your application.
Enhancing perceived performance
Adding micro-interactions, such as a custom progress bar or an animated setup dialog which guides the user through a process, can change the way users perceive the time it takes to complete a task.
We can alter our user’s sense of time with animations and this can work in our favor if our performance budget needs some refactoring.
Example: Form Entry
Inform users about the status of a task
As a user’s request is processing or as their data is loading, we can use a micro-interaction to inform them of its status.
Custom progress bars are a great way to keep your users from getting frustrated and will stretch the amount of time they’re willing to wait for a process to finish.
Examples:
Illustrate a state change
If a user is filling out a form and incorrectly enters their password, we can use micro-interactions to illustrate that this form needs to be fixed prior to submission.
Examples:
Draw a user’s attention to something
Using micro-interactions to capture a user’s attention and indicate that there is something of importance is a useful tool for onboarding or to indicate someone is typing.
Example: Chat
To create habits
Social media applications are really good at getting their uses to form habits, and they do so with micro-interactions. Facebook’s like button is a prime example of this, as is Instagram’s heart animation.These small interactions delight users and keep them coming back for more.
Example: Reactions
Further reading:
Do’s and don’ts
Before you build your first micro-interaction, it’s important to understand the do’s and don’ts.
Do make your micro-interactions accessible
Users won’t care about the coolest micro-interaction in the world if it’s not accessible. If the interaction indicates state change, ensure that the proper HTML elements and attributes are used; otherwise, add the appropriate WAI-ARIA counterparts.
Don’t add animation to everything
Animations draw the user’s attention, but not all information has the same level of importance.
First understand which component on the page has the most pertinent or time sensitive information or priority, and then decide what to animate.
Do make interactions feel as if they’re part of the real world
Our goal is to create animations which feel natural and fluid, not robotic and linear. Try to mimic the physics of the real world when designing and developing micro-interactions.
How Do You Build A Micro-Interaction?
There are three main areas to designing a micro-interaction:
- Interaction Trigger
- State Definition
- Animation Definition
Interaction Trigger
All micro-interactions require something else to trigger them. This can be a user-triggered action, like clicking a button, or a system-prompted event, like requesting data.
State Definition
Once we know what triggers the micro-interaction, we must define the different state that this micro-interaction has.
Animation Definition
Once we’ve defined the various states, we can define what is expected at each step.
Conclusion
In the next two posts in this series, we’ll dive into building micro-interactions with react-spring in two tutorials. In the first tutorial, we’ll build a navigation menu (full page and sidebar). In the second tutorial, we’ll build a modal that flies in from outside of the viewport and an image gallery.
7 Comments
Animations are irritating. I hate the damned things and disable them in any program I use. They are the first thing I turn off after installing a new copy of Windows.
Just change state and get it over with. I have things to do. I’m not using the program to be “entertained” by some unnecessary animation.
While your “cute” animation is running, the GUI can’t be used. Bad design. Bad idea. Leave it out.
Spend your time making the program work better instead of making it actively get in the way of its users.
Can’t say I agree with the idea that animations are universally bad. I appreciate them in certain contexts. On an administrator dashboard? No, absolutely not. As a progress indicator? A simple confirmation somewhere? Sure. They provide a nice polished feel when used properly.
You’re missing the point. This isn’t about making animations the focus. This is about using small, timed UI changes to improve usability and experience. That’s the idea of a “micro-interaction” – something that helps the brain understand what to do next, or what it should expect. When done well these improve usability and decrease the time needed to proceed correctly.
I’m the same way as you with Windows. Windows animations hamper usability and are not helpful. They’re not really what’s being discussed here.
Waiting anxiously for the second part.
Animations are good for showing what’s happening while I wait for an interaction
I think you left out a really big don’t:
DON’T make your users wait for your animation to complete before the UI will function!
Oh I hate that so much! The intentional progress bars…. don’t do it…. give your user their content!
In a past project we managed to increase the perceived performance by speeding up the loading spinners 🧠😂
Great article, I’m looking forward to the next one!