Animation (timeline and keyframes)

Keyframe animation is made in the timeline at the bottom of the canvas.

Turning the timeline on

Press Enable Timeline at the bottom to activate it.
Hover the top edge of the timeline panel for a resize cursor and drag to change its height (useful with many tracks).
The ruler shows time ticks (1s, 2s …) for the whole duration; drag on it to move the playhead (red line) and preview that moment.
The ⋯ menu to the right of the controls has display options — for example Show Easing Curves (off by default).
The duration field (seconds) next to the time display sets the whole timeline's length (adjust it here after a video import extends it automatically).
Playback controls (left to right): go to start ▎◀ · one frame back · play / pause ▶ · one frame forward · go to end ▶▎ · loop toggle ↻ · playback speed (0.25×–4×, default 1×).
Playback follows real time — if a frame is slow (video decoding, say) the clock keeps up by skipping frames, so the total length never stretches. With loop on (highlighted) it starts over at the end; off, it stops there. Frame stepping and start/end jumps pause playback.

Creating keyframes

Select one layer.
Move the playhead to the time you want.
Press Add Keyframe to record the current pose (position, size, scale, rotation, opacity, fill colour, path) as a keyframe.
- Adding the first keyframe somewhere other than t=0 also creates a baseline keyframe at t=0.
Move to another time and change values (see "Automatic keyframes"); the two keyframes are interpolated.

Keyframe diamonds in the inspector

With the timeline on, a diamond (◇/◆) appears in front of Position · Size · Rotation · Opacity · Fill · Stroke · Trim (shapes) and Content (text). (Stroke keyframes colour and width together, including the colour's opacity. Content appears for text layers only.)

Smooth motion path — with the timeline on, enable Smooth motion path in the Layout section to move between position keyframes along a smooth curve instead of straight lines (automatic bézier). The canvas then shows the motion path and its keyframe points in orange. Turn it off to return to linear interpolation.

Drag the white circles (tangent handles) that extend from each keyframe point to shape the curve. Both sides move symmetrically by default; hold Option to move one side only.

Dim ◇ — the property is not animated yet. Clicking adds a keyframe at the current time and starts the animation (a baseline keyframe at 0 s is created too).
Hollow ◇ (accent colour) — animated, but no keyframe at the current time. Clicking adds one with the current value.
Filled ◆ (accent colour) — a keyframe exists at the current time. Clicking deletes it.

Automatic keyframes (recorded as you edit)

With the timeline on, editing a layer that already has keyframes (dragging, resizing or rotating on the canvas, changing inspector values, editing colours or paths…) records the changed property as a keyframe at the current playhead.
Moving several selected objects at once records a keyframe for each of them.
Layers without keyframes are treated as static — editing them creates no keyframes (use Add Keyframe first).

Animatable properties

Position, size (W/H), scale, rotation, opacity
Fill — solid colours interpolate; gradients of the same kind interpolate their stops (colour and position). Different kinds (solid ↔ gradient, linear ↔ radial) cross-fade smoothly.
Path (the anchors and curves of pen shapes) — morphs between the point layouts of each keyframe
Text content — not interpolated: at each keyframe the text switches instantly and holds until the next one (stepped changes for captions and swapped phrases). Text layers only.
- Video exports (MP4, MOV, GIF…) include it. Lottie (JSON) export does not yet include text content keyframes (the text at design time is written as static text).

Editing keyframes

Keyframes appear as diamonds (◆) on the layer's track.
Click a diamond to jump to its time and select it.
Drag a diamond to change its time.
The banner at the top of the inspector always says which keyframe you are editing (Baseline / Keyframe n / m). Changing properties in that state updates that keyframe's values.
Press Delete with a keyframe selected to remove it (same as the trash button in the timeline bar). Clicking the canvas clears the keyframe selection so Delete applies to layers again.
A layer's appear/disappear span bar is tinted with its fill colour, and a colour swatch sits next to its name, so you can tell tracks apart at a glance (grey when there is no fill). Changing the fill updates it immediately.
Video tracks are taller and show frame thumbnails in time order inside the clip bar (updated as you trim, move or zoom). Audio tracks show a waveform icon; both draw fade regions (dark wedges) and a mute marker on the bar. During playback, video and audio clips play with their volume and fades applied.
Selecting a keyframe shows an Easing button in the timeline bar. It opens the easing editor:
- Presets: Linear · In · Out · In·Out · Hold
- Curve graph: drag the two control points to draw a custom cubic bézier (values beyond 1 give overshoot).
- Easing applies to the segment from this keyframe to the next (to its right). With ⋯ menu ▸ Show Easing Curves on, each keyframe's segment shows its easing curve (off by default).

Per-property tracks (sub-tracks)

The disclosure arrow (▸/▾) left of a track name expands the layer's per-property sub-tracks (Position X/Y · Scale · Rotation · Opacity · Fill · Path …).
Keyframes on the layer row are selected, moved and deleted as poses (every property at that time).
Keyframes on a sub-track affect that property only, so timing can be adjusted per property.

Track ↔ canvas selection

Selecting a shape on the canvas highlights its track.
Clicking a track row (its name) selects the shape on the canvas.

Layer appear / disappear (visibility span)

With the timeline on, selecting a layer shows a Timeline section in the inspector.
Appear At / Disappear At set when the layer starts and stops being visible on the timeline. Outside that span it is not drawn.
Timeline span bar: the span can also be edited on the track — drag the middle to move the whole span, drag the ends (handles) to change the appear and disappear times.
- The bar appears for layers that already have a track (layers with keyframes) and for layers with an appear/disappear time. For a static layer, set Appear/Disappear At once in the inspector and its row and bar appear.
(Video layers use clip trimming and placement instead.)

Animating layers inside groups

Children of a group can be keyframed independently. Double-click the group to select a child, then add keyframes; that child moves on its own (separately from the group).

Finished animations can be exported as MP4 / MOV video. See Export.