Skip to main content

Why is UI Animation Important?

Image by Stripe

Image by studio Gunner

Everyday we click, tap, scroll and swipe our screen using a computer or mobile device. While we take these actions, good design gives feedback such as changing colors, size or playing animation. These responses make us feel like we are interacting with the elements inside the screen. It also enhances the user experience and helps users to understand their status clearer. For example, shaking the bell icon slightly with the count number to notify the user that there is a new alert or showing dynamic animation for the loading page, so the user doesn’t feel like they are waiting too long. Like these examples, a small animation in the interface can make a big difference in user experience. But we should keep in mind that good UI animation needs both purpose and style. They should be placed in the interface for a user-centered reason and visually designed well.

In this insight post, we would like to share one of the powerful tools called “Lottie” that designers and developers can use for adding UI Animation to any platform in a most efficient way.

What is Lottie?

Created by Airbnb, Lottie is a JSON-based animation file format that enables animators, designers and developers to easily integrate After Effects animations into any platform such as iOS, Android, Web and React Native. It uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin which was created by Hernan Torrisi

Image by Lottie

Image by Bodymovin

Why Lottie?

Multi-Platform

It is a very flexible animation format that you can use it anywhere in Web or Mobile app. Since it’s using JSON, it can be assimilated into JavaScript or any application development environment that supports JSON format.

Small File Size

It has much smaller size than using other formats like mp4, PNG Sequence, GIF files. Lottie file significantly increases download speed and reduces the amount of disk space utilized.

High Quality Performance

It brings high quality of animation performance and resolutions by mixing vector and raster elements and applying transformations in any devices. Even if you scale up/down the lottie animation, you will not see any pixelated issue anymore and get the best quality of the animation.

Adding Interaction

You can easily add any interaction to your animation and manipulate the elements by using lottie interactivity library or any other programming.

How to use Lottie?

Here are the 4 steps.

1. Prepare design & animation

Source credit Lottiefilies

First, design and prepare a nice animation in After Effects. There is a list of AE features that Lottie supports and doesn’t. I recommend checking out this list before you create your animation: https://airbnb.io/lottie/#/supported-features

2. Export animation as JSON with Bodymovin plugin

Download bodymovin Plugin which is an After Effects extension to export Lottie animations. Install the extension, select the composition that you want to export, and change the setting as needed. Then just click the “Render” to get the JSON file. You will need to download the lottie.js player as well through the “Get the Player” tab. If you got the JSON file with the lottie.js, you are good to go.

3. Test your animation before rendering

Before you add your animation to the platform, there are some ways you can test your animation. You can preview your animation from LottieFiles and easily convert it to GIF if needed. You can also tweak the speed of the animation or main colors for some elements through Lottie Editor as well.

4. Render natively on mobile or web with a few lines of code

Conclusion

As you see the process of workflow above, it is a very simple and intuitive tool that we can easily transfer our well-designed assets into digital products. Lottie animations can be used from small icons, buttons to any kind of visual elements to direct the attention of the users, give feedback and provide better navigation, transition experience. It has a huge potential not only for improving the user experience within the products but also helping to establish an efficient workflow for animators, designers and developers who are creating and shipping the animation to the products.

Accelerate your Digital Transformation

Amanda Lee

Interaction Designer (IxD) - Digital Solutions, AECOM