Skip to main content

​
Motion

Animate on the same canvas you designed on. Your design is frame 0 — keyframes take over from there.
Motion is the second half of every vector artboard. A frame you drew in Design can be flipped into Motion with one click in its title bar, and the whole animation toolset opens at the bottom of the window. No export, no import, no second file — the same shapes, text, and fills you designed become the layers of your animation.

​
The idea: design is frame 0

Motion works the way Rive and After Effects think about animation: the design values you set in Design mode ARE frame 0 of your animation. Nothing you drew is “converted” — it’s already the first frame.
  • A shape sitting at the top-left of your design is at position frame 0.
  • Keyframes you add at frame 1, 2, 3… override that base, and everything between keyframes is interpolated by the engine.
  • Elements with no keyframes at all simply render their design state — static and visible, exactly as you left them.
This is why there’s no separate “motion state” to keep in sync: one value, one truth. Change the design, and the animation’s starting point changes with it.

​
Getting a motion frame

Two ways in, both start from the frame menu in the top toolbar:
  1. Create a motion frame — pick the Motion preset panel when adding a frame. You get video-shaped presets — Video 16:9 (HD / Full HD / 4K), Square 1:1, Portrait 4:5, Story 9:16 — and each preset already carries its frame rate (fps). Size is set once here and shared with Design mode, so there’s never a second size to drift.
  2. Flip an existing design — select a vector artboard and click Motion in the tabs on its title bar (next to Design). The bottom timeline opens and your design becomes frame 0, ready to animate.
A note on size: the artboard size is THE size, in both modes. You set it at creation; the Composition panel in Motion mode shows it read-only with a quiet “Set in Design” badge.

​
The timeline

The bottom panel replaces the AI toolbar while a motion frame is active. It’s After-Effects shaped:
  • Left column — every animatable layer, each expandable into four property rows: Position, Rotation, Scale, Opacity (plus Fill and Stroke). The left column is a live editor: the values are editable right here, with the same scrub-and-type controls as the right panel, so both surfaces always agree.
  • Right column — the keyframe track: a time ruler, one lane per property, keyframe diamonds in the accent color, and a playhead that moves as you scrub or play.
  • Both columns share one vertical scroll, so labels and lanes never drift apart, no matter how many layers you’re animating.
Above the panel is the transport bar — go to start, step back one frame, play/pause, step forward, go to end, and a loop toggle. Next to the playhead counter is the duration control: double-click it to set how many frames your composition runs (shown as frames plus an After-Effects style hh:mm:ss:ff timecode at your composition’s fps).

​
Setting keyframes

The stopwatch-and-diamond system is the whole game:
  1. Scrub the playhead to the moment where something should change.
  2. Change a value — drag the element on canvas with the move gizmo, or edit a number in the Properties panel or the timeline’s left column.
  3. A keyframe diamond appears on that property’s lane at the playhead. Done — the engine interpolates from the previous keyframe to this one.
Every property row carries its own stopwatch indicator — the diamond itself tells you the state at a glance:
  • Hollow — the property has never been keyframed.
  • Accent — the property has keyframes.
  • Filled — there’s a keyframe exactly at the playhead right now.
Editing at frame 0 is editing the design — the base itself. Past frame 0, edits drop keyframes. The first keyframe you drop at frame 0 is an explicit starting anchor (that’s also the natural way to animate scale, which starts at 1). Working with diamonds:
  • Click a diamond to select it; ⇧/⌘-click or marquee-drag selects many.
  • Drag a selected diamond to move it in time — the whole selection rides together.
  • ⌥-drag a diamond to duplicate it; ⌥-drag the first or last keyframe of a selection to stretch the whole block proportionally in time (AE’s proportional time stretch).
  • ⌫ deletes selected keyframes; ⌘C / ⌘V copies and pastes them at the playhead; ⌥← / ⌥→ nudges in time.
  • Arrow keys nudge a selected group on canvas — and drop a position keyframe on every layer at the playhead.
  • Clicking a lane scrubs straight to that frame; clicking a diamond’s lane selects its layer so the right panel follows.

​
Easing — how things move between keyframes

Easing is per keyframe and describes how the motion leaves that keyframe toward the next one. Named presets are the shared vocabulary, so what you pick by hand is exactly what the AI can emit:
  • Linear — constant speed.
  • Ease In / Ease Out / Ease In-Out — the classic acceleration curves.
  • Snappy — a quick settle, for the tactile “UI polish” feel.
  • Hold — the value stays put until the next keyframe, then jumps. No interpolation.
  • Continuous Bezier — a smooth curve that passes through the keyframe instead of dwelling at its ends.
Two ways to set it:
  • Right-click a keyframe for the Keyframe Assistant — Easy Ease, Easy Ease In·Out, Linear, Hold, Continuous Bezier — with the AE shortcuts F9 / ⇧F9 / ⌘⇧F9.
  • ⌘-click a keyframe toggles Continuous Bezier directly.
  • In the Properties panel, pick a preset from the easing menu or grab the curve editor handles to write a fully custom bezier.

​
The Properties panel in Motion mode

The right panel branches into a dedicated Motion path whenever the active frame is in Motion mode:
  • Composition (frame selected) — name, background fill, frame rate presets (23.976 / 24 / 25 / 29.97 / 30 / 48 / 50 / 60), and the read-only size with its “Set in Design” badge.
  • Transform (element selected) — Position X/Y with a link toggle (linked: editing one moves both by the same delta), Scale W/H with a link toggle (linked: aspect preserved), Rotation, Opacity. Every field carries its own keyframe diamond.
  • Appearance — Fill and Stroke (color swatch → the app picker, stroke width) and blend mode, shared with Design mode (blend modes are static — they don’t keyframe, exactly like Figma and AE).
  • Export — render your animation to MP4 (H.264); stills export as PNG/PDF.
Mask, Replicator, and Effects sections are on the roadmap — they’re visible in the panel as coming-soon.

​
Handy shortcuts

Space + drag pans the canvas — and it works in the timeline too.

​
Common questions

  • “My element doesn’t move.” It has no keyframes — elements without keyframes render their design state, static and visible. Scrub the playhead, change a value, and it becomes part of the animation.
  • “Why is the timeline gone?” The timeline is page-scoped — it opens for a motion frame on the current page of the current project. Switch pages and it closes until you come back.
  • “Can I animate an AI-generated design?” The timeline today animates free elements on vector artboards. Generated design frames are built from containers and sections — bringing those into the timeline is the next big milestone, and it’s exactly where the engine is heading.

​
Next

Animation rides on top of design — if you haven’t, meet Containers & auto-layout first. And the agent that runs your surfaces can help you set up compositions too.