Keyframe Animations

3 min read

Keyframe animations provide precise property control over time.

Supported Properties

Property	Description	Format
`position`	Item position	`[x, y]`
`x`, `y`	Position components	number
`scale`	Uniform scale	number
`scaleX`, `scaleY`	Axis scale	number
`rotation`	Rotation in degrees	number
`opacity`	Transparency (0-1)	number
`fillColor`	Fill color	color string
`strokeColor`	Stroke color	color string
`fontSize`	Text size	number

Creating Keyframes

const item = app.create({
  type: 'circle',
  position: [400, 100],
  radius: 50,
  fillColor: '#fbbf24'
});

app.modify(item, {
  animationType: 'keyframe',
  keyframes: [
    { time: 0, properties: { position: [400, 100], fillColor: '#fbbf24' }, easing: 'linear' },
    { time: 3, properties: { position: [400, 300], fillColor: '#f97316' }, easing: 'easeInOut' },
    { time: 6, properties: { position: [400, 500], fillColor: '#dc2626' }, easing: 'easeOut' }
  ]
});

Easing Functions

Easing	Description
`linear`	Constant speed
`easeIn`	Slow start, fast end
`easeOut`	Fast start, slow end
`easeInOut`	Slow start and end
`bounce`	Bounce effect at end
`elastic`	Elastic overshoot

Color Interpolation

Colors smoothly interpolate in RGB space:

app.modify(sky, {
  animationType: 'keyframe',
  keyframes: [
    { time: 0, properties: { fillColor: '#1e3a5f' } },   // Night
    { time: 2, properties: { fillColor: '#ff7e5f' } },   // Sunrise
    { time: 4, properties: { fillColor: '#87ceeb' } },   // Day
    { time: 6, properties: { fillColor: '#ff6b6b' } },   // Sunset
    { time: 8, properties: { fillColor: '#1e3a5f' } }    // Night
  ]
});

Color Formats

All valid formats for keyframe colors:

{ fillColor: '#ff0000' }           // Hex
{ fillColor: '#ff000080' }         // Hex with alpha
{ fillColor: 'rgb(255, 0, 0)' }    // RGB
{ fillColor: 'rgba(255, 0, 0, 0.5)' }  // RGBA
{ fillColor: 'red' }               // Named colors

Playback Control

// Play with duration and loop
app.playKeyframeTimeline(8, true);

// Stop
app.stopKeyframeTimeline();

// Scrub to specific time
app.setPlaybackTime(2.5);

Example: Day/Night Cycle

// Create scene elements
const sky = app.create({ type: 'rectangle', position: [400, 300], size: [800, 600] });
const sun = app.create({ type: 'circle', position: [100, 500], radius: 60, fillColor: '#fbbf24' });

// Animate sky
app.modify(sky, {
  animationType: 'keyframe',
  keyframes: [
    { time: 0, properties: { fillColor: '#0f172a' } },
    { time: 2, properties: { fillColor: '#fb923c' } },
    { time: 4, properties: { fillColor: '#38bdf8' } },
    { time: 6, properties: { fillColor: '#f97316' } },
    { time: 8, properties: { fillColor: '#0f172a' } }
  ]
});

// Animate sun arc
app.modify(sun, {
  animationType: 'keyframe',
  keyframes: [
    { time: 0, properties: { position: [100, 600], opacity: 0 } },
    { time: 2, properties: { position: [200, 100], opacity: 1 } },
    { time: 4, properties: { position: [400, 50], opacity: 1 } },
    { time: 6, properties: { position: [600, 100], opacity: 1 } },
    { time: 8, properties: { position: [700, 600], opacity: 0 } }
  ]
});

// Play
app.playKeyframeTimeline(8, true);