What is Lottie?

The Lottie format is a JSON animation file format for integrating 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, Components, 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.