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.
Blur effects
Stylize Effects
Particles
If there's a specific feature you're looking to create with Lottie, please leave us a message.