Making a Lottie without After Effects

Lottie grew up inside After Effects, and most guides still start with "open After Effects and install Bodymovin". If you do not have a Creative Cloud subscription, or you have one and would rather not open a video compositor to animate a checkmark, there is a shorter path.

What a Lottie file actually is

Despite the reputation, a Lottie is not an Adobe format. It is a plain JSON file describing layers, shapes and keyframes, which a player redraws frame by frame. Nothing in the specification requires After Effects: that is simply the tool most animators already had.

Open one in a text editor and you will find the frame rate, the composition size, and for each layer a list of properties with keyframes and bezier handles. Anything that can write that structure can produce a Lottie.

Making one in a browser

For icon and logo animation, which is the overwhelming majority of what Lottie is used for, a browser tool is enough. The workflow:

1. Export your icon as SVG from Illustrator, Figma or Inkscape, with text converted to outlines.
2. Drop it into the editor. Each shape becomes a layer.
3. Choose how the stroke reveals itself, set the duration and the stagger between shapes.
4. Add keyframes for position, scale, rotation, thickness or colour if you need movement beyond the drawing.
5. Export Lottie. You get a .json with trim paths for the drawing and bezier easing on every keyframe.

No subscription, no plugin, no render queue.

What you give up

Being straight about this saves a wasted afternoon. A browser tool built around icons will not give you:

• Imported footage or raster images. Vector shapes only.
• Complex masks, mattes and blend modes. Those are compositor features.
• Character rigging and parenting hierarchies. Layers are independent.
• Expressions. No scripted relationships between properties.

If your animation needs any of those, After Effects is the right tool and worth the licence. If it is a logo that draws itself, an icon that transitions or a loader that loops, the compositor is a lot of machinery for the job.

Handing it to a developer

Send the .json and tell them three things: the intended size, whether it should loop, and the background it will sit on. On the web the player is a script tag and a container:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<div id="anim" style="width:200px;height:200px"></div>
<script>
lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg', loop: true, autoplay: true,
  path: '/animations/logo.json'
});
</script>

On iOS and Android the native players take the same file unchanged.

Checking it before you send it

Two minutes that prevent an embarrassing round trip:

• Preview it in a real player, not only in the editor. The point is to see the file the developer will see.
• Check it at final size. Strokes that look right at 500 px can disappear at 32 px.
• Watch the loop point. If it loops, the last frame must lead cleanly back into the first, which usually means matching the first and last keyframe values.
• Look at the file size. An icon animation should be tens of kilobytes. If it is megabytes, something upstream, usually an over-detailed path, needs simplifying.