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 plays once and the playhead returns to the start, ready to play again. 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.

Animate presets (entrances and exits)

Right-click layers (on the canvas or in the layer panel) ▸ Animate for ready-made motion: Fade In / Out, Slide Up · Down · Left · Right In / Out, Pop In / Out (with a slight overshoot), Rotate In, Blur In / Out and Draw Line (a stroke drawing itself).

It starts at the playhead and lasts 0.6 s. Entrances end at the layer's current look; exits start from it.
With several layers selected they move one after another (0.08 s apart), top of the layer list first.
The result is ordinary keyframes — move, retime or delete them on the timeline. The timeline is created or lengthened if needed. Groups move with everything in them.

Text animation (kinetic type)

Select a text layer and use the inspector's Text Animation section to make its characters, words or lines move one after another.

Add Animation — Fade, Rise, Drop, Slide Left / Right, Pop, Blur, Rotate, Typewriter, Wave.
Direction — In (appear: from the start state to the normal text) or Out (leave: from normal to the end state).
By — Character / Word / Line (wrapped lines count; spaces don't). Order — Forward, Backward, From Center, Random.
Timing — Start (timeline seconds), Length (how long each one moves), Delay (between one and the next). Easing — Ease Out / In / In Out, Linear, Spring (bounces), Hold.
Starts from / Ends at — offset X/Y, scale, rotation, opacity and blur of the moving state.
Add several (e.g. an In at 0 s and an Out at 3 s). They show on the canvas, in playback and in PNG, video and GIF exports. SVG and Lottie exports show the text at rest.

Loop and wiggle

Select a keyframe on a property sub-track (expand a layer's track) to get two buttons in the timeline bar:

Loop — after the last keyframe, Cycle (start over) or Ping-Pong (back and forth) instead of holding. Great for spinning icons or breathing glows.
Wiggle (number properties) — smooth random motion on top of the keyframes: Frequency (wobbles per second), Amount (how far either way) and Seed (a different but repeatable pattern). Use it for floating badges, shaking or flickering.

Counters, font size and tracking

Turn on Counter in a text layer's inspector to make it a number: Number (with a keyframe diamond), Decimals, Prefix / Suffix (e.g. "$" or "%") and Thousands Separator. Keyframe Number at two times and it counts between them ("$0" → "$1,250.00").
Size and Tracking of text have keyframe diamonds too — grow a headline or spread its letters over time. Auto-width/height boxes follow.

Motion blur

Timeline options (⋯) ▸ Motion Blur in Exports smears fast motion in video, GIF/APNG and PNG-sequence exports: Shutter 90° (light) / 180° (film) / 360° (strong) and Quality (how many moments each frame averages: 4 / 8 / 16 — more is smoother and slower). The canvas preview stays sharp.

Group timing (reusable animation)

Select a group or frame and turn on Own Timing in the inspector's Timing section: everything animated inside plays on the group's clock — Starts After (delay), Speed (2 = twice as fast) and Loop (Cycle / Ping-Pong, with a Loop Length). Duplicate an animated group and give the copies different delays to reuse one animation. The timeline still shows the keyframes inside at their own times.

Camera

Right-click layers ▸ Focus Camera Here: from the playhead the view pans and zooms (0.8 s) so they fill the frame; Reset Camera goes back to the whole frame. The first time, the scene is put in a Camera group, and camera moves are keyframes on it — edit them on the timeline like any others. Layers outside the Camera group (titles, captions) stay fixed on screen.

Transitions

Select two layers (usually two scene groups) ▸ right-click ▸ Animate ▸ Transition: Crossfade, Push (4 directions), Slide Over (the upper one covers the lower one), Zoom Through, Blur Through — from the lower layer in the list to the upper one, starting at the playhead (0.8 s). The incoming scene is hidden before and the outgoing one after.

Morphing shapes

Path keyframes blend between any two shapes, even with different numbers of points (a circle into a star): points are added to the simpler one and the shapes are lined up so they don't twist. Arrange ▸ Union / Subtract / Intersect / Exclude combine selected shapes (same parent) into one path.

Beats and markers

Right-click an audio or video layer in the layer panel ▸ Detect Beats: its beats become orange markers on the time ruler, and keyframes you drag snap to them. Timeline options (⋯) ▸ Clear Markers removes them.

Follow

Inspector Layer ▸ Follow links a layer to another one: it moves, turns and scales along as that layer animates away from its own pose — like parenting, without grouping (an arm and a hand, a label and its card). The selection box shows the layer's own position.

3D rotation (2.5D)

Layout ▸ 3D Rotation turns a layer in depth: X tips the top edge away, Y turns the right edge away; both have keyframe diamonds. Perspective sets how strong the depth looks; turn off Show Back to hide the layer while it faces away (card flips). PNG, video and GIF exports show it; SVG and Lottie exports, and the selection box, stay flat.

Motion pieces

The Insert menu (also the toolbar's ＋ menu) inserts ready-made pieces built from ordinary layers and keyframes, so everything in them can be edited, retimed and exported (Lottie included):

Chart… — columns, bars, line, area, pie or donut from rows of label, value (paste from a spreadsheet; more values per row make more series). Bars grow, lines draw and slices sweep in from the playhead, with value labels and a legend. Select the chart and use Inspector ▸ Chart (kind, values, axis, animation) or Edit Data… to change it — rebuilding replaces the chart's parts, so edits made inside it are lost.
Code… — a code window (dark or light, with a title and window buttons) with syntax colours for Swift, JavaScript, TypeScript, Python, JSON, Kotlin, Go, Rust and shell; Type it out types the code from the playhead.
Cursor — a pointer that glides between points. Move the playhead, move the pointer, and right-click ▸ Add Click at Playhead to press it there with a ripple.
Particles ▸ Confetti, Sparkles, Snow, Bubbles or Burst — the simulation is baked into keyframes for each particle (it doesn't react to later edits; insert again for a new pattern).
Device frames — right-click an image or video ▸ Add Device Frame ▸ an iPhone or iPad model (or Match Screen Size, which picks the model from the picture's pixel size). The picture goes inside a vector bezel with rounded screen corners, and its motion moves to the frame.

Glow and grain

Inspector ▸ Effects also has Glow (a coloured halo around the layer's shape; colour and radius) and Grain (film noise over the layer; amount and size). Both show in the preview and image/video exports.

Importing Lottie animations

Insert ▸ Lottie Animation… (also in the ＋ menu), or drop a Lottie .json onto the canvas: the animation becomes one group of editable layers — shapes (rectangles, ellipses, paths including animated paths, stars, fills, strokes, trim paths), solids, nulls, precomps (groups on their own clock), embedded images and static text — with position, scale, rotation, opacity and anchor keyframes keeping their easing. Gradients become their first colour. Expressions, masks, track mattes, effects, text animators and external images are left out; a sheet lists what was skipped. Comps larger than the artboard are scaled down to fit, and the timeline grows to the animation's length.

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.