Very often, when creating interactive interfaces, animations, or screen transitions, developers encounter problems in doing them in code. This can make the development process time-consuming and inexpedient and is particularly crucial when working on outsourcing projects with limited budget and time, but with a need for stunning user interface.
A little while ago, Airbnb announced a new animation tool 一 Lottie 一 for easily using animations in apps. This engineering animation software helps convert animations of any complexity into a JSON file allowing developers to just drop it into the product. Airbnb Lottie not only makes engineering in animation easier but works on multiple platforms: iOS, Android, and React Native.
Lottie is one of the best apps for creating animations. But before rushing to using this new animation app, let’s first consider the pros and cons of this new solution to see what new possibilities and limitations are.
Smooth workflow. Developers don’t have to think how to embody designer’s ideas into reality. With Lottie animations can be accurately and quickly converted into code.
Animation values are stored in the JSON file. Flinto lets you see the majority of animation values, but not all. Principal, in turn, is very limited and not all of the key values like timing and graphics are displayed. With Lottie, animation values like timing, position, graphic, and digits are stored in the JSON file so that there’s no need to install a program for previewing the source file.
Rich animations with less effort. The developer doesn’t need to code every single little line, effect, and transition. Designers have therefore the opportunity to craft rich animations with complex interactions and not be afraid it’ll be time-consuming.
Blending modes without merging layouts. All designers know that using blending modes and hand this off to the developer without merging layouts is a taboo. With Lottie, there’s no such restriction.
This solution works only with After Effect. When using Lottie, you can’t benefit from any third-party solution like Flinto or Principle.
The other shortcomings are directly related with After Effect. Yet this tool provides designer with greater opportunities than similar software solutions. And there are lots of plugins that make the work with user interface animations easier. You won’t therefore have any difficulties switching to this solution. But mind that 95% of plugins for AE are chargeable.
You are limited to working only with animations on the screen. You can’t create stunning transitions between screens. We can only work with the box, like:
Limitations of animation. It’s impossible to create any animation you want like fantastic particle animation, light effects, and other designer tricks like:
Although with AE and Lottie you’re provided with ample possibilities, there’s some limitation that should be considered when crafting an animation. To better know what your restrictions with Lottie are, you should know its capabilities. At this point, Lottie supports the following functionality:
Stroke (shape layer)
Fill (shape layer)
Trim Paths (shape layer)
Polystar and Polygon
New After Effects features coming soon
Although, Lottie has some limitations including limitations of the animaton, After Effect and screen transitions that are not available, the things provided are of great help for designers. With Lottie, crafting rich animations has become more accessible and less time-consuming. Even though working with After Effect is far from simple, it’s worth a try. Your applications and websites will be able to attract more users thanks to stunning animations.
Works speak louder than words. Therefore, if you want to look through the examples of what we’ve crafted with Lottie so far, you’re welcome to check the following links:
You can also find the latest animation news on Lottie at airbnb.design and learn how to animate using After Effects and Lottie at airbnb.io.
Have any questions? Get in touch with us and we'll be happy to answer.