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. It's vector-based, offering flexibility and versatility without heavy performance issues.

When to use Lottie

Use Lottie when...

• You want interactive animations in web or mobile experiences.

• You need an efficient, small file size (Lottie is much smaller than GIFs and PNGs).

• You want animations to scale to various screen sizes without pixelation.

Learn how to integrate your Lottie animations into Framer and Webflow.

When not to use Lottie

Avoid Lottie when...

• Your project involves complex effects (Lottie doesn't support most raster-based motion effects).

• You don't need to embed your final project. Because Lottie is a JSON file, it won't be easily presentable since it can't be opened by most movie file players.

• Style needs don't fit Lottie; GIFs are an alternative.

Feature Support

Fully Supported 🟢:

• Shape Geometry + Properties

• Path Animation

• Masks (Normal, Inverted, Group, Compound)

• Images

• Duplicator Instances (when contents are supported)

• Fable Control Tools (Parenting, Controllers, Scenes, Groups)

Not Supported 🔴:

• Blur Effects

• Stylize Effects

• Particles

• Various Blend Modes

• Some Shape Modes

• Some Text Features

• Audio, Effects, Masks (Gradient, Trim Path), Text Animators, etc.

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 in the export.

View a comprehensive list of features supported by Lottie export in Fable here.