Lottie, Who?

Common mistakes made by newbies when creating animations in After Effects for Lottie.

What is Lottie?

Lottie is an open-source, efficient and flexible solution, that makes implementing animations painless and smooth. It reduces the costs of writing a thousand lines of codes and lets developers quickly implement even the most complex animation.

The Airbnb Team introduced Lottie in 2017. It’s an iOS, Android and React Native library that renders animations created in After Effects. Lottie uses JSON files exported from the free After Effects plugin Bodymovin.

Everyday After Effects workflow is slightly different than creating animations for Lottie. Before you even begin planning your future animation, you have to understand that Lottie has several limitations, like a specific list of supported After Effects features or forbidden plugins.

If Lottie is new for you and you want to save client’s money with an easy-to-use tool or avoid hours of struggle with implemented animations that aren’t working, here are some of the most common newbie mistakes.

Mistakes to avoid when creating animations in After Effects for Lottie:

Old habits

After years as animators and designers, we get into a lot of habits when it comes to planning and creating animations. Using and depending on known tricks, plugins, presets and expressions in After Effects is the first common newbie mistake.

Unfortunately, the Lottie library doesn’t support some of the essential functions of After Effects such as Expressions or Effects (from the Effects Menu). Also, forget about Blending Modes, Luma Mattes and Layer Effects (like a Drop Shadow, Colour Overlay), because it doesn’t support these features either.

The platform (Android, iOS or Web) where you’re planning to use the animation is also significant. Since not all features are supported on every platform, you need to check a long list of supported functions first.

The safest, but maybe not the easiest solution is to focus mostly on “pure” shape animation and, if you have to, use the supported features. Keep your project as simple as possible and create beautiful animations!

Messy layers

It’s obvious that Lottie works best with shape layers, but to be honest, sometimes it’s painful to draw vector illustrations in After Effects itself. Of course, we can import content from software like Illustrator and convert any vector asset to AE’s shape layers. For Sketch the instructions are even more complicated. Yet, you should be cautious about what exactly you’ve imported to your composition.

Clean your shape layers right after importing from Adobe Illustrator

In most cases when you add an asset prepared in another software and convert it into an After Effects shape, there will be some unnecessary things hidden in the layers. You can find stuff like additional merge paths or groups. Those useless elements do not influence much animation on preview in AE. However, after some long, hard work when exporting it and previewing it with Lottie, some mysterious, bad things start to happen. Usually, the animation is broken somehow and acts weirdly invalid.

The first task, when spotting the problem, is to dig into each shape layer and remove the merge paths or groups to make the composition neat. Unfortunately, in some cases, you have to rebuild it differently and animate it one more time. I would recommend cleaning these layers right after importing to avoid possible problems in the future.

Additional tip: Remove assets from the composition after you’ve converted it to shape layers. You will avoid exporting it with JSON.

Useless keyframes

One of the most important advantages of Lottie is the lightweight exported JSON file. Developers are crazy about the small sizes of their websites and apps, and you should be too. Be aware of the consequences of long loading times and lagging animations.

By mistake, you can add unwanted kilobytes to your perfect animation. The first tip is to use the “parenting” technique on any occasion because extra keyframes mean extra kilobytes. Duplicating the same keyframes on related layers adds useless lines of code.

Animating along a path or using presets like Autotrace or Wiggler generate a lot of additional keyframes and can make your JSON file size very problematic.

Not only do a bunch of keyframes mean trouble, Alpha Matte and Mask size matter and can significantly impact the performance. If you have to use it, cover as small of an area as possible. You need to find a balance between the creation of the animation and the efficiency of its performance.

Not checking twice

Although I’ve mentioned it earlier, I’ve decided to write the separate paragraph about reviewing your animation, because of the importance of this topic.

Test your project throughout animating process

In some cases, animation after export with Bodymovin and previewing it with Lottie doesn’t look like the animation you’ve created in After Effects. Save time, nerves and energy and avoid re-creating your animation by checking supported Lottie’s features and testing your project earlier.

Review the condition of your animation throughout the animating process, not only at the end. It will be easier to find possible obstacles and issues if you check the unfinished animation on Bodymovin preview inside After Effects, Lottie’s website or with Lottie’s App.

If you’re already having difficulties with complex composition, it’s not so easy to isolate areas that are causing a problem. You have to go through the whole structure, starting with turning off some of the groups of layers and exporting parts of the animation. Preview it with Lottie and check which part is generating the complication. After discovering the problem, you should dig into those layers, remove additional paths or rebuild it differently.

Bonus: Non-English After Effects

Gradient problems are not unique, but I was shocked when I first found the solution. The most common issue is that a colourful gradient is exported as black&white. When your colours don’t seem to work, check if your After Effects is in English and if all your layers and compositions are named uniquely in English. It doesn’t work every time, but it has worked during my tests.

The power of Lottie

Despite a few restrictions, Lottie is a powerful tool. First of all, the workflow is really straightforward. Designers can simply export their animations from After Effects and developers can easily drop that into their app’s assets. Besides that, Lottie is cross-platform so you can use the same JSON file on the web as well as on iOS apps. It’s also worth considering using Lottie because of its scalability of vector animations and its lightweight exported files.

If you are having any problems with the process, I would recommend searching through Airbnb’s Github or post about your issues there. I’ve noticed that the support is really helpful, and respond to every concern.

Now that you know about Lottie’s limitations, you’re ready to download what you need to get yourself started and learn how Bodymovin works, to begin your first project! Finally, after years of struggle, the implementation of animation is effortless and easy.