Nowadays, animations are ubiquitous as their creation is becoming more straightforward. The proper use of animation makes the user interface more interesting and better communicates the necessary information to the user. In this article, we will look at Lottie-based animations that are much faster to load than the traditional format. We will focus on avoiding common mistakes so that the animation looks amazing.
This article is based on this publication https://www.elpassion.com/blog/lottie-who-common-mistakes-in-after-effects-animation-for-lottie.
What do you need to know about Lottie?
Lottie is a JSON-based file format used to create animations. What’s important, Lottie can work on many platforms. Lottie animations are small-size files that run on various mobile and desktop devices and can be scaled without pixelating. Best of all, Lottie’s animations require no coding knowledge! So Lottie is a flexible solution that allows for smooth implementation of animations.
Lottie was introduced back in 2017. It’s an Android, iOS, and React Native library that renders animations created in After Effects. As mentioned, Lottie uses JSON files exported from After Effects.
Tips–how to avoid mistakes when creating an animation
DON’T RELY ON OLD HABITS
We often develop habits in various areas of our lives. The same thing happens with animators and animation designers after years in the profession.
Using familiar and the same plugins, tricks, or presets when creating Lottie-based animations is a common mistake among novices. For example, if you want to use animation on different platforms (Android, iOS), you should consider that not all features will be supported on each of them.
WATCH OUT FOR USELESS KEYFRAMES
Another common error is duplicating the same keyframes on related layers. This results in a large JSON file size. Animation size can significantly affect the performance and is a consequence of animation lag and slow load times.
How can you avoid it? Make sure the keyframes are not duplicated and keep a balance between creating the animation and its performance.
CLEAN UP UNNECESSARY ELEMENTS IN THE LAYERS
Building Lottie-based animation files in After Effects can be time-consuming and a little bit of a hassle. Of course, it is possible to import content from other software. However, you have to be careful as you often find unnecessary, useless elements in layers. So if you are using different software and want to convert the asset to an AE shape, take care to clean up the layers after import.
CHECK OUT THE CONDITION OF YOUR ANIMATION THROUGHOUT THE ANIMATION PROCESS
Another mistake, quite often made, is checking the state of the animation at the very end of its creation. If you check the animation at the very end, you have to analyze the entire structure to pinpoint and isolate the areas where the problem appeared. How can you avoid this excessive amount of work? The best way is to check the condition of the animation during the creation process. This makes it easier to find and eliminate potential glitches.
What should you know when animating with textures?
There are a few things you should know if you want to create animation files with textures:
- It would be best if you used vectors–this way, the output file will be lighter
- When drawing a texture, remember that by keeping the texture simple, you can decrease the size of the ready-made animation file
- If possible, do not use masks in your animations (they can cause errors in some Internet browsers)
Keeping all these rules will help you create amazing animations–effectively and without excessive work.
Thanks to Elpassion.com for helping us to write this article.
