Skip to Content

Lottie

Lottie (bodymovin JSON) works in both directions: import an animation as real tracks, and export a composition as Lottie for the web or mobile.

Importing

Insert → Lottie import, or drag a .json file in, or pick one of the 8 bundled Lottie animations in the Elements & Library panel.

The animation arrives baked: rigs come in as animated paths with real keyframe tracks. Once imported it is ordinary layers and ordinary keyframes.

The coordinate-space difference

Worth knowing because it explains a class of import bug that used to exist and no longer does: the engine works in absolute coordinates, while Lottie is relative. The conversion happens during import, and world-space preservation is handled explicitly so imported layers do not jump when they are reparented.

If a Lottie import ever lands in the wrong place, that is a bug worth reporting rather than something to correct by hand.

ip and op

Lottie’s in-point and out-point are respected, so a file whose animation starts at frame 30 arrives with its timing intact rather than snapped to zero.

Exporting

File → Export… → Lottie writes bodymovin JSON.

Lottie export covers vector shapes and transform tracks only. Rasterised effects, GPU filters, 3D lighting and video layers have no Lottie representation and will not survive the round trip. Build for Lottie deliberately if Lottie is the deliverable.

When to use Lottie

Use Lottie whenUse video when
The animation is vector shapes and transformsIt has effects, video, or complex shading
It must scale to any sizeFidelity matters more than size
File size matters — it is JSON, not pixels
It ships inside a web or mobile appIt ships as a file or a post

For anything that needs an alpha channel but is not vector, WebM with VP9 is usually the better answer. See Export formats.

Last updated on