Start with a clear Excalidraw scene

Build your base diagram first: clear labels, consistent spacing, and a logical visual order. If you are new to Excalidraw itself, start with the What is Excalidraw? guide before moving into animation.

Name core elements clearly so animation prompts can target them reliably.
Use groups for repeated UI sections or multi-element blocks.
Keep the initial frame readable before motion is added.

2

Define timing and motion intent

Move into Excalimate and describe the reveal flow in plain language. The MCP tools can translate your instruction into keyframes and sequencing rules.

Prompt example

Animate this onboarding flow in 6 seconds:
- Fade in each card with a 180ms stagger
- Draw connector arrows as each card appears
- Add a gentle camera pan from left to right
- End with a 300ms hold on the final frame

3

Preview and polish in timeline context

Scrub the timeline and check each reveal moment at normal speed and reduced speed. Focus on readability: can someone follow the story without replaying?

Use staggered reveals to reduce visual overload.
Adjust easing for natural starts and stops.
Keep camera moves subtle unless you need a strong narrative shift.

4

Export as dotLottie or Lottie JSON

For most web delivery, export to dotLottie for smaller payloads. Choose Lottie JSON when your downstream tooling requires raw JSON.

Need format trade-offs? Use the export guide for side-by-side comparisons and What are Lottie Files? for format details.

dotLottie — smallest files, best for web and app embedding.
Lottie JSON — broad compatibility with existing Lottie pipelines.
Always review one exported file outside the editor before shipping.

5

Embed and validate in the real target surface

Test playback where users actually see the animation: docs page, product UI, or landing page.

Web component embed

<script src="https://unpkg.com/@dotlottie/player-component"></script>

<dotlottie-wc
  src="/animations/onboarding-flow.lottie"
  autoplay
  style="width: 100%; max-width: 720px; height: 420px"
></dotlottie-wc>

React embed

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export function WorkflowDemo() {
  return (
    <DotLottieReact
      src="/animations/onboarding-flow.lottie"
      autoplay
      loop={false}
      speed={1}
    />
  );
}

6

Save the workflow as a reusable template

Reuse successful patterns across teams by keeping a small workflow template: scene naming conventions, timing defaults, and export targets.