Getting started

From a static SVG to an exported Lottie animation in nine steps. If you're new to the app, work through this once — the whole flow takes a couple of minutes. After that, changing the artwork itself covers reshaping paths, text, gradients, masks and alignment.

The walkthrough

1. Bring in your artwork

   Choose Import ▸ SVG in the toolbar, or just drag an SVG file onto the canvas. Groups and layers come in intact and show up in the Layers panel on the left, ready to animate. Import ▸ Lottie opens an existing animation instead, if you're picking up work that started elsewhere.

   Animating a logo? Start from its SVG. Logos are almost always designed as vectors, so the SVG usually exists even if you only have a PNG to hand: ask your designer, look in your brand kit, or export it yourself — Figma, Illustrator, Affinity and Inkscape all export SVG. A PDF, EPS or AI file needs exporting to SVG first.

   Only have a PNG or JPG? Import ▸ Image brings it in as a picture, and an AI assistant connected with Connect your AI can trace it into editable shapes — gradients included. A trace is a close copy; the SVG is the original, so use it whenever you can.

   You can also draw from scratch with the shape tools — R rectangle, E ellipse, G polygon, S star, P pen — and V to go back to the select tool.

2. Set up the composition

   Click the Canvas button in the toolbar — the one next to your project name showing the size. The right-hand panel switches to Canvas ▸ Composition: frame rate (12–100 fps), duration (1–10 seconds), background color, and how colors blend between poses. Set these first — the storyboard's timing is measured in frames, so changing fps later moves your poses around in time.

   Canvas settings are what you see whenever nothing is selected, so clicking empty artboard does the same thing. The toolbar button is there for when it isn't empty — once a layer covers the composition there's no bare canvas left to click.

3. Select the layer you want to animate

   Click it on the canvas, or pick it from the Layers panel. The storyboard at the bottom of the window is always scoped to the selected layer or group — each one gets its own row of poses, so different parts of the artwork can move independently.

   To reach a layer hidden behind another, hold Alt — or Ctrl/Cmd — and click. A click on the canvas normally selects whatever is on top, so a background or a full-width illustration would otherwise make everything beneath it unclickable. Click again with the modifier held to go deeper; it wraps back round to the top when you reach the bottom, and it crosses between groups, so a layer in a different group is reachable this way too.

4. Add your first pose

   Click ＋ Add pose on the storyboard. The first click gives you two cards: a baseline holding the layer exactly as it is now at frame 0, and a new pose one second later. The playhead jumps to that new pose, ready for you to change something.

5. Change something at that pose

   Move, scale, rotate, or recolor the layer — on the canvas or in the Properties panel. The edit is captured into the pose you're sitting on, and the editor fills in the motion from the baseline to it automatically. Press Space and it's already animating.

   Each further click of ＋ Add pose adds another pose one second after that layer's last one — retime it afterwards by dragging the card or editing its frame number, which is usually quicker than positioning the playhead first.

   A pose only pins what you actually changed. Move a layer and the pose pins its position; its rotation and color glide straight through, unaffected. That's what keeps separate properties from fighting each other when they change on different frames.

6. Keep going — and pose other layers too

   Add a pose for every frame where a layer changes. Select a different layer and pose it as well, on the same frames or completely different ones. Each layer's poses are its own: dragging one layer's card retimes that layer only. Double-click a card's name to rename the pose, and use the note and color tag to keep long sequences organized.

7. Preview it

   Tap Space to play and pause, or drag the playhead to scrub. , and . jump to the previous and next keyframe. The onion-skin button on the storyboard shows faint ghosts of the neighbouring poses, which makes lining up an arc much easier.

8. Fix the timing

   The buttons on the right of the storyboard act on the whole sequence: reverse it, ping-pong it (play forward then back), compress or stretch the timing, or distribute the poses evenly between the first and last. These retime every layer at once, and poses on the same frame move together. To retime a single pose, drag its card along the strip or edit the frame number on the card.

   Shift-click a range of cards and group them into a collapsible section when a sequence gets long.

9. Export it

   Your project saves to your account as you work — the Saved to cloud chip in the toolbar tells you where it stands. Ctrl/Cmd + S is there when you want to be sure, and Local ▸ Save writes a .lep file to your computer if you'd like an offline copy of the editable project.

   Export opens a menu of formats: Lottie JSON and .lottie for the animation, MP4 for video, and under Image the current frame as PNG, JPG, WebP or SVG. Every plan exports every format; on the free plan the file carries a small watermark, and the note at the bottom of the menu is the way to lift it.

   Exports are transparent by default. If your canvas has a background color and you want it baked in as a solid layer, tick Include background at the bottom of the export menu. That choice is remembered between sessions, so if an export comes out with a background you didn't expect, check there first.

Changing the artwork itself

The walkthrough above animates what you imported. You can also edit the artwork — reshape paths, add and style text, paint gradients, mask one layer with another, and line things up on the artboard. Everything here lives in the right-hand panel with a layer selected.

Reshaping a path

Press A, double-click a shape, or use Edit Vertices in the properties panel. Any of the three puts that shape into point editing, where its outline shows every vertex and you can move them individually.

• Drag a point to move it; drag its handle to curve the segment.
• Drag empty space to rubber-band select several points at once, and Shift + click to add or remove one.
• Ctrl/Cmd + A selects every point; arrow keys nudge the selection (Shift for ×10).
• Click the outline itself to add a point, Alt + click a point to remove it, and double-click one to switch it between a corner and a smooth curve.
• Esc, or Done, leaves point editing.

Shape changes can be posed like anything else, which is how you morph one outline into another between two poses.

Text

Press T and click to place a text layer. With it selected, the Text section sets the content, font family, size, weight, style, and which end of the text sits at the layer's position.

Text is converted to shapes when you export, so the animation doesn't depend on the viewer having your font. That conversion happens on your machine, using the fonts installed on it — so if a family isn't installed, the export warns you by name rather than quietly dropping the text. Installing the font and exporting again fixes it, as does outlining the text in your design tool before importing the SVG.

Fills, strokes and gradients

Click a color swatch in the properties panel to open the picker. Along the top are Solid, Linear and Radial — switching to one of the gradients turns that fill or stroke into a gradient you can edit stop by stop.

Gradients animate: change one at a pose and it blends to the next, the same as a solid color. Which color space that blend happens in is a canvas-level setting — see Canvas ▸ Composition.

Masking one layer with another

With a layer selected, Mask ▸ Source picks another layer whose shape clips it. Useful for revealing artwork through a shape, or confining a fill to an outline.

The source must be a sibling — a layer at the same level, inside the same group. That is a Lottie restriction rather than ours: a mask is expressed as "the layer directly above" within one layer list, so a source from another group cannot be written to the file at all. The picker only offers siblings for that reason, and if an older project has a source from elsewhere it is marked won't export rather than being silently rewritten.

Aligning to the artboard

The Align to Artboard buttons snap the selection to the left, center, right, top, middle or bottom of the composition. They align on what you can see — the visual bounding box after rotation and scale — rather than on the raw geometry, so "center" lands dead-center even for a rotated shape.

Animate with your AI

Your own AI assistant can work in the project you have open: trace a picture into shapes, draw, recolour, delete, and animate. It connects as a connector (MCP), runs on your AI subscription, and costs nothing here. It's on every plan, Free included, once your email is verified.

1. Copy the connector URL

   In the editor, click Connect your AI in the toolbar and press Copy next to the connector URL.

2. Add it to your AI app

   Claude (web or desktop): Settings ▸ Connectors ▸ Add custom connector, and paste the URL. Any other AI app that supports MCP connectors works the same way, as long as its connectors may make changes, not only read. Sign in with your Awesome Lottie account when asked, and choose Allow.

3. Ask

   Keep the editor open, then ask in plain words: “trace the logo”, “make the logo bounce in, then have the stars twinkle one after another”. Each change appears in the editor as it's made, and each one is a step you can undo. Everything it makes is ordinary layers and poses, so you can fine-tune it by hand.

Describe each part as one smooth motion, like “have the sun rise in one smooth motion”. An assistant that splits a move into several steps makes the layer pause at each one.

The Connect your AI window also lists the apps you've connected, and you can disconnect any of them there.

Prefer manual keyframes?

Posing on the storyboard is the fast path, but it isn't the only one. The Edit keyframes directly button on the storyboard freezes the selected layer's generated animation as ordinary hand-authored keyframes and stops animating it with poses — from there you edit the keyframe timeline directly. This is a one-way switch for that layer, so save first if you want to be able to go back.

Keyboard shortcuts

Press ? at any time to see this list inside the app.

The in-app list also covers editing points — press A or double-click a shape to reshape it — which has a dozen shortcuts of its own.