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 animation
Source: airbnb.design/lottie

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

 

Dribbble shot. Bubble animation
source: dribbble.com by Gleb Kuznetsov

Limitations of animation. It’s impossible to create any animation you want like fantastic particle animation, light effects, and other designer tricks like:

Dribbble shot. Organic Artificial Intelligence animation
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:

Keyframe Interpolation

  • Linear Interpolation
  • Bezier Interpolation
  • Hold Interpolation
  • Rove Across Time
  • Spatial Bezier

Solids

  • Transform Anchor Point
  • Transform Position
  • Transform Scale
  • Transform Rotation
  • Transform Opacity

Masks

  • Path
  • Opacity
  • Multiple Masks (additive, subtractive, and intersection)

Track Mattes

  • Alpha Matte

Parenting

  • Multiple Parenting
  • Nulls

Shape Layers

  • Anchor Point
  • Position
  • Scale
  • Rotation
  • Opacity
  • Path
  • 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

Repeaters

  • Supports repeater transforms
  • Offset currently not supported

Gradients

  • 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.

Layer Features

  • Precomps
  • 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
  • Expressions
  • 3d Layer support
  • Time remapping / Layer Reverse
  • Layer Blend Modes
  • Layer Effects

Summing up

Although, Lottie has some limitations including limitations of the animation, 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.