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

“There are two kinds of time: clock time and brain time. The former is the objective measure of time; the latter is how a person perceives time.”

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

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.