Lottie by Airbnb: Innovation or Limitation For Designers?
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.
Pros and cons of using Lottie by Airbnb
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.
Pros of using Lottie
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.
Cons of using Lottie
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:
SOURCE: DRIBBLE.COM BY YUP NGUYEN
SOURCE: DRIBBBLE.COM BY GLEB KUZNETS
Limitations of animation. It’s impossible to create any animation you want like fantastic particle animation, light effects, and other designer tricks like:
SOURCE: DRIBBBLE.COM BY EUGENE PARYHIN
SOURCE: DRIBBBLE.COM BY EUREKA MOMENT
What can you do with Lottie?
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:
- Linear Interpolation
- Bezier Interpolation
- Hold Interpolation
- Rove Across Time
- Spatial Bezier
- Transform Anchor Point
- Transform Position
- Transform Scale
- Transform Rotation
- Transform Opacity
- Multiple Masks (additive, subtractive, and intersection)
- Alpha Matte
- Multiple Parenting
- Anchor Point
- Group Transforms (Anchor point, position, scale, etc.)
- Rectangle (All properties)
- Eclipse (All properties)
- Multiple paths in one group
- Even-Odd winding paths
- Reverse Fill Rule
Stroke (shape layer)
- Stroke Color
- Stroke Opacity
- Stroke Width
- Line Cap
- Dashes (Now Animated!)
Fill (shape layer)
- Fill Color
- Fill Opacity
Trim Paths (shape layer)
- Trim Paths Start
- Trim Paths End
- Trim Paths Offset
- Supports repeater transforms
- Offset currently not supported
- Support for Linear Gradients
- Support for Radial Gradients
Polystar and Polygon
- Supported! There’s a known bug if the roundness is greater than 100 percent.
- Image Layers
- Shape Layers
- Null Layers
- Solid Layers
- Parenting Layers
- Alpha Matte Layers
New After Effects features coming soon
- Merge Shapes
- Alpha Inverted Masks
- Trim Shapes Individually feature of Trim Paths
- 3d Layer support
- Time remapping / Layer Reverse
- Layer Blend Modes
- Layer Effects
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:
Have any questions? Get in touch with Steelkiwi and we'll be happy to answer.