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

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.

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.

Distortion effects (Pinch, Wave Warp, etc.)
Blur effects
Stylize Effects
Particles
Compound Masks

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