Breathe life into web through animations

What are Microanimations for?

Microanimations have many purposes, such as:

• Guiding the user to perform a desired action
• Helping the user focus on a specific part of a complex task, making the task feel smaller and more manageable
• Providing visual feedback
• Highlighting the outcome of an action or process

Microanimations are a boon to user experience (UX), by making the app delightful to use. These experiences contribute to the user forming a positive attitude towards the brand, product, or company.

Microanimations are an enhacement whether you are building a completely static website or a web app with rich functionality. Animations can really breathe life into an otherwise static website.

Types of Microanimations

Microanimations can broadly be divided into functional and decorative animations. Functional animations enhance the usability of the application, while decorative animations are designed to delight the user.

Functional Animations

Hover animations convey to the user that an element is clickable. Any element that has a click interaction should have a hover state, which may or may not be animated.

Loading animations communicate that an action is in progress. The choice of loading animation contributes to the user’s perception of the application’s performance, so the animation you choose can make a big impact.

Transition animations show how two distinct UI states are related to each other. For example, an accordion component may start out collapsed and, when clicked, gradually expand to show the content within. Without the animation, the user must “fill in the gap” on their own to make sense of the abrupt transition between UI states.

Decorative Animations

The hero graphics on a marketing site can benefit from decorative animations, which may be triggered by a specific event, or start automatically when the page loads.

Animations that follow movement of the mouse can add an extra layer of interactivity.

We already mentioned transition animations in the context of functional animations, but transition animations can serve a decorative purpose too. Transitions can be used between pages, or when the layout of the page changes, e.g. when toggling between a list and grid view.

Implementation Guidelines

When designing microanimations, you should keep the overall goals of the product in mind. What industry does the product target? What’s the overall experience you are trying to convey? Depending on the “vibe” of the project, you might want the animations to feel slow and exquisite, or fast and efficient.

One of the key factors here is the timing of the animation, including which easing curve is used. The general rule of thumb is to use a cubic bezier curve for any animation that involves movement — this gives the most natural look and feel. For opacity animations (e.g. a fade-in animation), using a linear easing function is fine.

The overall speed of the animation should depend on the size of the element. For large elements, use a slower animation, and for small elements, use a faster animation.

Here are a few common CSS cubic-bezier easing functions that work in a variety of scenarios:

• cubic-bezier(0.5, 0.5, 0, 1)
• cubic-bezier(0, 0.5, 0, 1)
• cubic-bezier(0, 0, 0, 1)

Conclusion

Microanimations are an effective tool to breathe life into static websites and interactive web applications. These animations can enhance usability by providing useful context clues, and improve the user’s perception of your brand by delivering a experience that feels fluid and fun. Broadly speaking, animations can be divided into two categories, functional and decorative, depending on their purpose. When designing microanimations, it’s important to consider the context in which the animation appears, and follow best practices on animation timing and easing functions.