Make a Lottie animation
Design it as layers, ship it as JSON
Lottie plays a vector animation natively in a browser or an app, which is why designers reach for it for icons, loaders and onboarding. Premation writes bodymovin JSON from shape layers and transform tracks, and reads a Lottie back in as layers you can edit.
Free · AGPL-3.0-only · macOS & Windows
The panel that does it
The editor’s own panel, rebuilt on its chrome. It works: drag, toggle, queue.
How to do it
- 01
Build it from shape layers
The pen, shape and pencil tools make vector paths; import an SVG to start from existing artwork. Keep it vector: raster images and effects do not travel in Lottie.
- 02
Animate with transforms and operators
Position, scale, rotation, opacity and path keyframes all export. Trim Paths and Repeater do too, which covers most icon and loader motion.
- 03
Check the export preview
The Export panel's Data category has Lottie. The preview scrubs the file that will be written, so anything missing is visible before you save.
- 04
Export and drop it in
One JSON file, played by lottie-web, lottie-ios or lottie-android. The file names layers as you did, so a developer can target them.
Questions
- Can I export text to Lottie?
- Not as live text: text layers and text animators have no Lottie representation and do not survive the round trip. Build a Lottie-bound piece from shape layers.
- Does Premation open dotLottie?
- It imports bodymovin .json. A .lottie file is a package around the same JSON; export the .json from your Lottie tool and import that.
- Will effects show up?
- No. Lottie has no effect model, so blurs, glows and colour corrections are dropped on export. The preview shows exactly what survives.