All articles
Guide Updated August 2026

How to make a Lottie animation without After Effects

By Harsh Pal 5 min read, updated 21 August 2026

In this article

You do not need After Effects to make a Lottie any more. There are three routes that all end in a production file: describe it in a sentence and let AI generate it, build it on a canvas with a real timeline, or bring an SVG you already have and animate that. Which one you pick depends on whether you are starting from nothing, from a design, or from a rough idea.

Why After Effects stopped being the only door

Lottie began as Bodymovin, an After Effects plugin. Airbnb open sourced the runtimes in 2017 and the format took off, but for years the only serious way to make one was a $23 a month Adobe subscription and a fairly deep motion design skillset.

That is no longer true, and the field has split. Lottielab positions itself as the motion design tool for product teams. LottieFiles built a platform around a library and a workspace. Rive went off in the direction of state machines. All of them run in a browser.

What this means in practice is that a developer who needs one animated icon no longer has to learn After Effects to get it.

Three routes to a Lottie, none of them After Effects AI GENERATION a bouncing loader Describe it Best for spinners, ticks, loaders, empty states. CANVAS + TIMELINE Build it Best when the motion has to land a specific way. IMPORT AN SVG Bring your artwork Best when the drawing is already done and on brand. One editable Lottie Same canvas, same timeline, same export
Three different starting points, one file at the end. Most projects use more than one of them.

Route one: describe it

The fastest path from nothing to something is a sentence. Type what you want, get back an editable Lottie, then fix what is wrong on the canvas.

This is genuinely good for the boring 80%: loading spinners, success ticks, empty state illustrations, a pulsing dot, an arrow that loops. Things that need to exist and that nobody wants to spend an afternoon on.

It is not good at brand-specific work. If the animation has to match a specific illustration style or a motion language you already own, generation gets you a starting point and not much more. Treat the output as a first draft you edit, which is exactly why the output being editable matters more than the output being impressive.

In Lotiqlab this is AI mode. It writes real Lottie JSON, so what you get back opens in the same canvas and timeline as anything else and you can take it apart layer by layer.

Route two: build it on a canvas

For anything with real intent behind it, you want a canvas and a timeline. Shapes, a layer stack, keyframes on the properties that matter, and easing curves you can actually see and drag.

This is the route that most resembles After Effects, minus the install and minus about ninety percent of the buttons. You place elements, set keyframes on position, scale, rotation, opacity and colour, and shape the easing until the motion reads right.

The thing that makes or breaks a browser-based timeline is whether the easing is honest. A lot of tools give you presets and hide the curve. If you cannot drag the Bezier handles, you cannot fix motion that feels slightly wrong, and slightly wrong is where most animation dies.

Multiple pages in one file matter here too, since real work is rarely a single artboard. Lottielab has multi-artboard and it is one of the clearer reasons to pay them.

Route three: bring an SVG

Most teams already have the artwork. It is sitting in Figma as an icon, a logo, an illustration. Exporting that as SVG and animating the SVG is the shortest path to something on brand, because the drawing step is already done.

The catch is that SVG exports out of design tools are often filthy. Thousands of path points where fifty would do, nested groups five levels deep, transforms baked into places they should not be. That mess carries straight into the Lottie and shows up as a file that is ten times bigger than it needs to be.

So clean the SVG at the source before you animate it. Flatten the groups you do not need, simplify the paths, and name the layers you plan to move.

What actually makes a Lottie production ready

Getting something that plays is the easy half. The rest is what separates a file you can ship from one that gets sent back.

  • Size. Embedded raster images and over-detailed paths dominate file weight, not animation length. Run an optimizer and check what came out.
  • Runtime differences. lottie-web, lottie-ios and lottie-android do not support identical feature sets. Test in the runtime that will ship, not just the preview you made in.
  • Naming. A developer wiring your animation into an app will thank you for layers named spinner rather than Group 47.
  • Loop points. Decide whether it loops cleanly or plays once, and make the first and last frame agree if it loops.
  • Format. Ship dotLottie to your own app for the smaller payload, raw JSON to a third party embed that might not read the archive.

Picking a route

Starting from nothing and it does not need to be on brand? Describe it. Starting from a design you already own? Bring the SVG. Starting from a real motion idea that has to land a specific way? Canvas and timeline, and give it the time it deserves.

Most projects use more than one. Generate a rough loading state in a minute, animate the logo from the real SVG, and hand-build the one hero animation that people will actually notice. Lotiqlab does all three in one browser tab, and none of them cost anything.

FAQ

Frequently asked questions

Quick answers about Lottie files and how Lotiqlab works.

Can I make a Lottie animation without After Effects?

Yes. Browser based motion tools now make Lottie files directly, with a canvas, a layer stack and a real keyframe timeline. You can also generate an editable Lottie from a text prompt, or import an SVG you already have and animate that. None of these need an Adobe subscription.

What is the best free way to create a Lottie animation?

If you are starting from nothing, a text prompt gets you an editable draft in seconds. If you have artwork already, exporting it as SVG and animating that is faster and stays on brand. Lotiqlab does both free with no export limit, and Glaxnimate is a good open source desktop option if you prefer local software.

Is a browser Lottie editor as capable as After Effects?

Not for everything. After Effects has expressions, effects and compositing depth that no browser tool matches. For UI motion, icons, loaders and illustration animation, which is the bulk of what Lottie is used for, a browser editor covers it and is considerably faster to open.

Can I turn an SVG into a Lottie animation?

Yes. Import the SVG, and its shapes become layers you can keyframe. Clean the SVG first though, because design tool exports often carry thousands of unnecessary path points and deep group nesting, and all of that weight transfers into the Lottie.

Does an AI generated Lottie need editing afterwards?

Usually. Generation is good at common UI motion like spinners, ticks and loaders, and weak at anything that has to match a specific brand style. The important thing is that the output is real editable Lottie JSON rather than a flat export, so you can open it on the canvas and fix the parts that are wrong.