Make a Lottie animation free online, then use it in React

You can draw an icon, keyframe it, and export a real Lottie file without opening After Effects or installing Bodymovin. AtomCut is a free motion design and video editor that runs in the browser; because its scene is vector-native, it can translate its own animation into Lottie directly, along with a report of exactly what did and didn't carry over.

That matters if you've tried this the other way: draw in one tool, animate in After Effects, run a Bodymovin export, then find out which half of it survived only after loading the JSON in your app. Here, the drawing, the keyframes and the export all read the same document, so there's one place to check before you ship the file, not two.

Here's the whole path, icon to a running React component.

1. Draw the icon

Use the pen tool to draw two or three shapes. Keep it simple for your first export: a shape or two with fills and strokes translates cleanly, and you'll want to see a clean result before you push into gradients or effects. Shapes and paths carry solid or gradient fills and strokes, with dashes, caps and joins, all of which the Lottie translator maps natively rather than approximating.

2. Keyframe it

Click the ◆ diamond next to any property in the inspector to set a keyframe at the playhead, or press R to arm record mode and just edit — every change you make plants a keyframe at the current time. Open the curves panel to shape the easing with real Bézier handles instead of a picked-from-a-list preset.

3. Export to Lottie

Open the Export panel and switch to the Lottie tab. AtomCut translates your animation in the order it can: keyframes that map onto Lottie's own bezier keyframe model natively (transforms, opacity, fills, strokes, gradients, dashes, trim paths, shape morphs), then anything procedural gets baked into dense per-frame keys instead, and anything Lottie genuinely can't represent (video, audio-reactive waveforms, boolean composite groups, layer effects) is skipped.

4. Read the compatibility report

Before you save the file, the export panel lists every layer with a status: mapped, baked, partial or skipped, plus a note on each. For a plain shape with keyframed transforms and fills, expect every layer marked mapped. If a layer comes back skipped, that's the panel telling you honestly rather than shipping a file that's silently missing a piece.

5. Use it in React

Install lottie-react, then load the exported JSON:

import Lottie from "lottie-react";
import icon from "./icon.json";
 
export function AnimatedIcon() {
  return <Lottie animationData={icon} loop autoplay style={{ width: 120 }} />;
}

That's the whole component. loop and autoplay are lottie-react's own props; anything you keyframed in AtomCut is already baked into icon.json.

Questions people ask

Why is my exported file larger than I expected? Anything AtomCut can't map onto Lottie's native keyframe model directly (an exotic parametric shape, a loop or ping-pong time remap, a text glyph animation) gets baked into dense per-frame keyframes instead. That's correct output, at the cost of file size.

Does AtomCut export the dotLottie (.lottie) container format? No, it exports the plain Lottie JSON. Most players, including lottie-react, take that JSON directly, so this only matters if your pipeline specifically needs the zipped .lottie container.

Does the exported animation loop? Looping is a property of the player, not the file: lottie-react's loop prop (shown above) controls it, the same way any Lottie player does.

For the deeper reference on what maps, bakes or skips, see /docs/exporting. If you're animating a full clip rather than one icon, /docs/keyframes covers the record-mode and curve-editor workflow in step 2.