Exporting to Lottie

OVERVIEW

Learn how Lottie is a JSON file format that allows you to easily integrate motion into apps and websites with the help of it's friendly file size

What is Lottie?

The Lottie format is a JSON animation file format that can be used to integrate motion graphics into apps, websites, and more.

Because it is a vector-based format, Lottie offers flexibility and versatility without causing heavy product performance issues. It is primarily used to embed motion in product experiences.

When to Use Lottie

You should use Lottie when...

You want your animation to be interactive on a web experience, mobile app, or other interactive medium
You need a super efficient file size. Lottie is much smaller than GIFs and PNGs.
You need your animation to scale to a variety of screen sizes without pixelation

When not to use Lottie

You should not use Lottie when...

You're working on something with many complex effects. Lottie doesn't support most raster-based motion effects, lending itself to support simpler styles of motion graphics.
You don't need to embed your final project. Because Lottie is a JSON file, it won't be easily present-able since it can't be opened by most movie file players.

If you are trying to create product motion but have style needs that don't fit cleanly into the Lottie format, GIFs are a good alternative.

Feature Support

🟢 Fully Supported

These are Fable features that are fully supported by our Lottie export format. You can expect all these types of layers to render as-expected during export and on the Lottie preview.

⬛ Shape Geometry + Properties

Every types of shape and path can be rendered with Lottie. Properties such as the layer's fill + stroke, height + width, and corner radius will also be included.

➿ Path Animation

You can animate paths using the Trim Paths effect or animating a custom shape's path property

🔲 Masks

Normal, inverted, group and compound masks between layers are included on Lottie renders.

🖼️ Images

Any image format that can be imported into Fable (JPG, PNG, PSD) is supported in our Lottie export format.

🔢 Duplicator Instances

Duplicator instances are supported with Lottie exports, as long as the contents of the duplicator are supported elements (i.e shape geometry or images)

🔧 Fable Control Tools

Fable tools to connect layers – parenting, controllers, scenes, and groups – all work as expected on Lottie exports.

🔴 Not Supported

If a feature is not listed in either of the sections above, it is likely that it is not supported on Lottie export. Below is a list of notable features we commonly get asked about that are not supported by Lottie export.

Blur effects
Stylize Effects
Particles

Full Feature Support List

Blend modes
Blend modes
Add	🔴
Multiply	🟢
Darken	🟢
Lighten	🔴
Screen	🔴
Subtract	🔴
Subtract reverse	🔴
Color burn	🔴
Color dodge	🔴
Difference	🔴
Exclusion	🔴
Overlay	🔴
Soft light	🔴

Shapes
Shapes
Ellipse	🟢
Rectangle	🟢
Rounded rectangle	🟢
Star	🟢
Custom shape	🟢
Compound shape	🟢
Trim path	🟢
Shape Deformer	🔴

Fills
Fills
Solid color	🟢
Linear gradient	🟢
Radial gradient	🟢
Opacity	🟢
Images	🟢

Strokes
Strokes
Solid color	🟢
Linear gradient	🟢
Radial gradient	🟢
Opacity	🟢
Width	🟢
Line cap	🟢
Line joint	🟢

Transforms
Transforms
Position (X/Y)	🟢
Scale (X/Y)	🟢
Rotation	🟢
Shape opacity	🟢
Image opacity	🟢
Shape width/height	🟢

Other
Other
Scenes	🟢
Groups	🟢
Parenting	🟢
Controller	🟢
Particles	🔴
Text Animator	🔴
Wave Warp	🔴
Pinch	🔴
Audio	🔴
Effects	🔴

Masks
Masks
Regular	🟢
Inverted	🟢
Compound	🟢
Group	🟢
Gradient	🔴
Trim Path on masks	🔴

Images
Images
JPG, PNG, PSD	🟢

Videos
Videos
Videos & Gifs	🟢

Text
Text
Fonts	🔴
Animators	🔴
Fill	🔴
Font size	🔴
Kerning	🔴
Line height	🔴

Interpolation
Interpolation
Linear	🟢
Bezier	🟢
Hold	🟢