All Collections
Exporting
Lottie Export Format
Lottie Export Format
Christopher Han avatar
Written by Christopher Han
Updated over a week ago

About Lottie

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

  1. You want your animation to be interactive on a web experience, mobile app, or other interactive medium

  2. You need a super efficient file size. Lottie is much smaller than GIFs and PNGs.

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

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

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


Supported Features

🟒 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 and inverted 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.

☝️ As a general rule of thumb, if the element is something that can be rendered with the Lottie export, all of its keyframes and animation data will be included on the export.

🟑 Partially Supported

These are features that the Fable team are working on improving for the Lottie export format. They are not yet fully supported. Follow our What's New Page or join our community to hear updates on when they're fully supported

Text

Fonts

πŸ”΄

Font Size

🟒

Kerning

🟒

Leading

🟒

Color

🟒

Text Animator

πŸ”΄

Blend Modes

Normal

🟒

Darken

🟒

Multiply

🟒

Color Burn

πŸ”΄

Add

πŸ”΄

Lighten

πŸ”΄

Screen

πŸ”΄

Color Dodge

πŸ”΄

Overlay

πŸ”΄

Soft Light

πŸ”΄

Hard Light

πŸ”΄

Difference

πŸ”΄

Exclusion

πŸ”΄

Subtract

πŸ”΄

Divide

πŸ”΄

πŸ”΄ 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

If there's a specific feature you're looking to create with Lottie, please leave us a message.

Did this answer your question?