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.
🟢 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
corner radius will also be included.
➿ Path Animation
You can animate paths using the
Trim Paths effect or animating a custom shape's
Normal and inverted masks between layers are included on Lottie renders.
Any image format that can be imported into Fable (
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 –
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
🔴 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.)
If there's a specific feature you're looking to create with Lottie, please leave us a message.