What is Keyframe Animation?

Keyframe animation originated in the golden age of hand-drawn animation. Senior animators — called key animators — would draw the most important frames of a sequence: the start pose, the end pose, and any critical positions in between. These were the keyframes.

Junior animators, known as in-betweeners, would then draw all the frames between those keyframes to create smooth motion. This division of labor made animation practical at scale.

In digital animation, the concept is the same — but the computer handles the in-betweening (called interpolation or tweening). You define property values at specific points in time, and the software calculates every frame in between automatically.

A keyframe has three components:

• Target — which element to animate
• Time — when (in milliseconds) this value applies
• Value — the property value at that moment

// Fade in a box from invisible to fully visible
{ targetId: "box-1", property: "opacity",  time: 0,    value: 0 }
{ targetId: "box-1", property: "opacity",  time: 800,  value: 1 }

// Slide it 200px to the right
{ targetId: "box-1", property: "translateX", time: 0,   value: 0 }
{ targetId: "box-1", property: "translateX", time: 800, value: 200 }

The computer smoothly transitions the element's opacity from 0 to 1 and its horizontal position from 0 to 200 over 800 milliseconds. You only define the start and end — the engine fills in every frame.

Different properties produce different types of motion. In Excalimate, you can animate seven properties on any diagram element:

• opacity — fade elements in and out (0 = invisible, 1 = visible)
• translateX / translateY — slide elements horizontally or vertically
• scaleX / scaleY — grow or shrink elements
• rotation — spin elements around their center
• drawProgress — progressively draw arrows and lines (0 = hidden, 1 = fully drawn)

Combining properties creates rich effects. For example, animating both opacity and scaleX/scaleY together produces a "pop-in" effect where an element appears and grows simultaneously.

Easing controls how the interpolation happens between keyframes. Without easing, motion is linear — constant speed from start to finish, which feels mechanical and unnatural.

Easing functions add acceleration and deceleration to make animations feel organic. Common easing types include:

• easeIn — starts slow, accelerates toward the end
• easeOut — starts fast, decelerates to a stop
• easeInOut — slow start and end, fast in the middle
• easeOutBack — overshoots the target then settles back (bouncy)
• easeOutBounce — bounces at the end like a ball dropping
• step — instant jump with no interpolation

// Linear — constant speed, mechanical feel
{ targetId: "el", property: "opacity", time: 0,   value: 0, easing: "linear" }
{ targetId: "el", property: "opacity", time: 500, value: 1 }

// easeOutBack — overshoots then settles, natural bounce
{ targetId: "el", property: "scaleX", time: 0,    value: 0, easing: "easeOutBack" }
{ targetId: "el", property: "scaleX", time: 600,  value: 1 }

// easeInOutCubic — smooth start and end
{ targetId: "el", property: "translateY", time: 0,   value: -50, easing: "easeInOutCubic" }
{ targetId: "el", property: "translateY", time: 700, value: 0 }

Excalimate brings keyframe animation to diagrams and whiteboard designs. Instead of animating characters or illustrations, you animate the elements of your diagrams — boxes, arrows, text, and shapes — to tell a visual story.

A common pattern is progressive reveal: elements appear one at a time, guided by keyframes, so your audience follows the narrative step by step instead of seeing everything at once.

create_animated_scene({
  elements: [ /* your diagram shapes */ ],
  keyframes: [
    { targetId: "title",  property: "opacity", time: 0,    value: 0 },
    { targetId: "title",  property: "opacity", time: 500,  value: 1, easing: "easeOut" },
    { targetId: "arrow",  property: "drawProgress", time: 500,  value: 0 },
    { targetId: "arrow",  property: "drawProgress", time: 1200, value: 1, easing: "easeInOut" },
    { targetId: "server", property: "scaleX",  time: 1200, value: 0 },
    { targetId: "server", property: "scaleX",  time: 1600, value: 1, easing: "easeOutBack" },
    { targetId: "server", property: "scaleY",  time: 1200, value: 0 },
    { targetId: "server", property: "scaleY",  time: 1600, value: 1, easing: "easeOutBack" },
  ]
})

This example fades in a title, then draws an arrow, then pops in a server box with a bounce — all orchestrated through keyframes with different easing curves.

Keyframe animation offers major advantages over manually creating each frame:

• Efficiency — define just a few keyframes instead of hundreds of individual frames
• Flexibility — change timing, values, or easing without redrawing anything
• Small file size — keyframe data is tiny compared to frame-by-frame video
• Smooth motion — the computer generates perfectly smooth interpolation
• Non-destructive — adjust any keyframe without affecting the original design