Why Animations?
Learn how animations play a key role in the overall experience of your application.
Animations, in the traditional sense, are the means to manipulate a static figure to create the illusion of motion. The word “animation” comes from the Latin words “anima” and “animare,” which mean “life” and “to breathe life into” respectively.
When we think of manipulating a still image to create motion, the first thing that usually comes to mind is the flipbook. A flipbook is a booklet with a series of images that gradually change between pages. When you flip the book really fast, you create an illusion of the image moving.
The flipbook concept forms the basis of most animations today. In the world of web development, animations are created by gradually modifying an element’s properties within a given time. Instead of a series of images, the web uses the concept of frames, where each frame will reflect the gradual change in property.
Example
Let’s say you want to move an element 50px to the right of its current position. The default way of doing this would be to set the translateX property to 50px. Setting this property would move the element instantly. An animated approach, on the other hand, would modify the translateX by smaller increments over a period of time to reach the final value of 50px.
Importance of animations
Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional.
Animations can be used to create fun experiences that delight users, but it also has practical use cases. Animations are so deeply ingrained in modern technology that our brains often don’t notice them. However, if we remove these animations, we’d immediately realize that something feels off.
Here are some examples of how animations are used in the realm of UI development:
This is very important in most applications to help distinguish between the elements that the user can interact with versus the ones that can’t be interacted with. A simple example of this is a button or card’s hover state to indicate that they are clickable.
Confirm user’s actions
This is visual feedback that tells the users that the application has registered their action, such as through ae.g. button click or form submission.
Grab user’s attention
Sometimes we want to guide a user to a specific part of the page. For example, a notification or inbox button could have a pulsing or blinking indicator telling the user to look at it.
A page full of UI elements can be overwhelming to a user, leaving them unsure of what to do. We can use animations to help guide the user through the experience. For example, a feeds-style application could animate the individual posts separately to indicate that each post can be interacted with independently.
