EaseKitDocs
Tutorials · Logo reveal: trace, draw on, export Lottie
Documentation

Logo reveal: trace, draw on, export Lottie

Turn a PNG logo into vector paths, draw it on with trim, fill it in and export Lottie for the web and apps.

Most logos arrive as a PNG. In this walkthrough you trace one into vector paths, give the paths a stroke, draw them on with trim and a stagger, fade the fill in behind the line, and export a Lottie file that plays in lottie-web, iOS and Android. About twenty minutes.

  1. Press ⌘N for a new session, then send “An empty 1:1 canvas, 1080 × 1080, dark background, 3 seconds.”
  2. Drag your logo PNG onto the stage (or paste it with ⌘V). It becomes an image layer.
  3. Scale it to about half the canvas and center it (Stage → Align).

2. Trace it

  1. Select the image and choose Stage → Trace Image… (also Vectorize in the inspector's Layer row).
  2. Pick a mode: B&W for a one-color mark (leave Auto on for the threshold), or Color with the number of colors in your logo.
  3. Drag Smoothness up until the edges look clean, and Corners until sharp corners stay sharp. Raise Noise to drop specks.
  4. Hold Original to compare with the image.
  5. Keep Ignore white on to drop a white background, and turn on Keep image hidden underneath if you want to switch back later.
  6. Click Trace. The footer showed how many paths and colors you'll get.
Trace Image with B&W mode and a live preview

The image becomes a group with the same id, frame and motion, holding paths named logo-p1, logo-p2 and so on, back to front.

3. Keep a copy for the fill

A drawn line looks best when the solid logo fades in behind it. Keep a filled copy for that now: select the traced group and press ⌘D. The copy is named “… copy” and lands 24 pt down and to the right, on top. Nudge it back onto the original: ⇧← twice and ← four times, then the same with ↑. Press ⌥⌘↓ (Stage → Send Backward) until it sits behind the original. This guide calls the copy “Logo fill”; you animate the original as the line.

4. Give the paths a stroke

Trim animates strokes, so the line paths need one. Select the paths of the original group: click the group on the stage, click again to go inside, and ⇧-click the rest (or ⌥-drag a marquee over them).

  1. In the inspector's Borders section, click + (Add border). Set the width to 3 pt and the color to your logo color. The change applies to every selected path as one undo step.
  2. Open the border details (the slider button next to the width). Set Cap to Round and Join to Round.
  3. In Fills, switch the fill off with its toggle, so only the line is left.

5. Draw it on

  1. Move the playhead to 0.2 s.
  2. Expand the original group's lane in the timeline, keep its paths selected, right-click one of their lanes and choose Stroke Animation → Draw On. Every selected path gets a trim from 0 to 100 % over 0.8 s, ease-in-out, from the playhead.
  3. Play it. All paths draw at once.
  4. To stagger them, select the paths and ask the AI “stagger the draw-on of the logo paths by 80 ms, left to right”. Or drag each lane's clip a little later by hand.

For one path with several parts (a traced letterform often has an inside and an outside), open the border details and look at the Draw section:

ControlSetting for a logo
PathsOne by One draws the parts as one continuous line; Together draws them at the same time, with a stagger from 0 % to 100 %
DirectionReverse if it starts at the wrong end; From Centre for symmetric marks
TaperStart and end at 20–40 % for a brush-like head and tail
Start, End, OffsetThe visible part of the stroke; ◆ keys a value at the playhead
The Draw section with trim, paths, direction and taper

6. Fill it in

  1. Move the playhead to where the last path finishes drawing (about 1.4 s).
  2. Select the “Logo fill” copy. In the inspector's Motion section, pick In and click Fade-in. It fades the copy in over 0.35 s from the playhead; before that moment an entrance keeps the layer hidden.
  3. Optional: fade the line out once the fill is in. Ask “fade the stroke paths out over 0.3 s at 1.8 s”.

An action's bar in the timeline can be moved and stretched; right-click it for Intensity or Run to End.

7. Check and export Lottie

  1. Open the Quality tab and make sure there are no blockers (a common one: the end frame isn't held long enough).
  2. Press ⌘E and click Lottie under Other formats. Save the .json file.
  3. Drop the file into LottieFiles or your app to check it.
In your sceneIn the Lottie file
Trim start, end and offsetNative Trim Paths
From Centre or a stagger across partsSplit into groups, values sampled
TaperUniform width (most players don't support Lottie's taper)
Blur, glass, background blur, inner shadowsLeft out, with a note
Camera tiltFlat: zoom, pan and roll only

Variations

  • Morph instead of draw: edit the path at a later time in vector mode and it morphs between shape keys. See Shape keys and morphing.
  • Comet trace: Stroke Animation → Trace sends a 25 % segment around the outline in a loop, good for loaders.
  • Video too: Render Video gives you an MP4 of the same reveal for social posts.