Why is UI Animation Important?
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
How to use Lottie?
Here are the 4 steps.
1. Prepare design & animation
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
4. Render natively on mobile or web with a few lines of code
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.