Skip to content

Lottieditor guides

A staggered logo reveal

Bring three pieces of a geometric mark into place, then hold the finished logo.

Loading the reference animation...

600 × 600 · 30 fps · 2 seconds · Designed to play once and hold

Keep the reference files

These original reference assets are free to use and modify. New editor exports follow Free and Pro limits.

Try this prompt

Connect your assistant to a new project first. Ask it to read the current project before editing. The supplied file is a reference result; another model or prompt variation may produce different geometry or timing.

Create a 600 by 600, two-second animation at 30 fps. Build a geometric logo with three rounded vertical bars centered at x 200, 300, and 400. Use purple, lilac, and green. Make their final heights 180, 280, and 220 pixels, with their bottom edges aligned at y 440. Stagger upward entrances by 0.15 seconds, fading from zero opacity. Finish all motion by 0.9 seconds and hold to the end. Keep every bar a native editable shape. Preview the start, middle, and last frame, then export a project backup.

Build the final mark first

Align the bars at the bottom, leaving 100 pixels of clear space on either side. Give each bar a descriptive name so an assistant can change one without moving the others.

Stagger the entrance

The purple bar starts at zero seconds, lilac at 0.15, and green at 0.3. Each moves up 80 pixels and fades in over 0.6 seconds. The finished mark stays still for the remaining time.

Replace the artwork

Use the supplied SVG as an import exercise. Upload it through the agent file tools, import it into an empty project, then request the same staggered entrance. Check whether imported shapes remain vectors before editing individual paths.

Use the result

Play once for a brand intro. Use the 1.6-second PNG as the static fallback. Keep your real brand name as text in the page rather than relying on an animation to communicate it.

Watch the reference motion

Finish and check

Preview the first frame, the moving portion, and the held final state. Compare the export in the player you will use. Keep meaningful labels outside decorative animation and use the PNG when reduced motion is requested.