Animating Designs with MCP

With your diagram created, it's time to bring it to life. Excalimate supports 7 animatable properties per element, a visual timeline, and camera animations — all controllable through MCP tools.

Every element in your scene can be animated with the following properties:

• opacity — Fade elements in/out (0 to 1)
• translateX / translateY — Move elements horizontally/vertically
• scaleX / scaleY — Grow or shrink elements
• rotation — Rotate elements (in radians)
• drawProgress — Progressively draw strokes (0 = invisible, 1 = fully drawn). Great for arrows and lines.

Keyframes define property values at specific points in time. Excalimate interpolates between them to produce smooth transitions. You describe what you want, and the AI places the right keyframes for you.

Fade in the Research box over 500ms, then draw the arrow to Design over the next 800ms.

add_keyframes_batch([
  { targetId: "research", property: "opacity",
    time: 0, value: 0 },
  { targetId: "research", property: "opacity",
    time: 500, value: 1, easing: "easeOut" },
  { targetId: "arrow-1", property: "drawProgress",
    time: 500, value: 0 },
  { targetId: "arrow-1", property: "drawProgress",
    time: 1300, value: 1, easing: "easeInOut" },
])

Easings control the acceleration curve between keyframes. Excalimate supports a variety of easing functions:

• linear — Constant speed, no acceleration
• easeIn — Starts slow, accelerates
• easeOut — Starts fast, decelerates
• easeInOut — Slow start and end, fast middle
• easeInCubic — Stronger ease-in curve
• easeOutCubic — Stronger ease-out curve
• easeOutBack — Overshoots then settles (bouncy)
• easeOutElastic — Spring-like oscillation
• easeOutBounce — Bounces at the end
• step — Instant jump, no interpolation

The create_sequence tool is a shortcut to reveal elements one after another — no need to manually place individual keyframes for each element.

Reveal all three boxes one after another with a 300ms delay between each.

create_sequence({
  elementIds: ["research", "design", "build"],
  delay: 300,
  duration: 500,
  property: "opacity"
})

Camera keyframes let you pan and zoom the viewport over time — perfect for guiding the viewer's attention through a complex diagram.

Start zoomed in on the Research box, then zoom out to show the full diagram.

// Frame the camera on the Research box
set_camera_frame({
  x: 200, y: 150, width: 400, aspectRatio: "16:9"
})

// Zoom out to show everything at 2 seconds
add_camera_keyframes_batch([
  { property: "translateX", time: 2000, value: 600, easing: "easeInOut" },
  { property: "translateY", time: 2000, value: 400, easing: "easeInOut" },
  { property: "scaleX",     time: 2000, value: 0.5, easing: "easeInOut" },
  { property: "scaleY",     time: 2000, value: 0.5, easing: "easeInOut" },
])

The set_clip_range tool defines the time window that gets exported. Only the portion of your animation within this range will appear in the final output.

set_clip_range({ start: 0, end: 3500 })

• Use create_animated_scene for new projects — it creates elements + animations in one call.
• Preview in Excalimate before exporting — use the live preview connection.
• Use save_checkpoint before experimenting with timing.
• The timeline in Excalimate shows all keyframes visually — useful for fine-tuning.