Motion and prototypes

Motion mode adds a timeline to the canvas. Animate any layer with keyframes or presets, decide what starts each animation, and play the result as a clickable prototype. Animations recorded from live websites open here too.

Switch to Motion mode

Click Motion in the canvas toolbar, or press Shift + M. Press it again to go back to Design.

The timeline opens under the canvas, with a row for each animated layer.

Animate with keyframes

1. Select a layer.
2. Move the playhead to a point in time.
3. Press K, or click the diamond next to a property in the properties panel.

K keys every property that is already animated on the selected layers. On a layer with no animation yet, it keys position.

Once a property has keyframes, changing it at the playhead adds a keyframe there. Turn on Auto keyframe in the timeline header to key every edit, even on properties that are not animated yet.

You can animate position, size, rotation, scale, skew, opacity, corner radius, fills, strokes, shadows, blur, text, letter spacing, font size, vector shape, and path effects such as trim and offset. On 3D layers you can also animate rotation, depth, the camera, field of view, light intensity, and materials.

Click a keyframe to move the playhead to it, and drag it to move it in time. To change the easing, click the line between two keyframes, or double-click a keyframe. The easing editor has curves and spring presets.

Use presets and text effects

In Motion mode, the properties panel has an Animations section. Click its Add animation button to add a preset that animates from the layer's current design:

• Position, Scale, Rotation, Size, Opacity

Click a preset in the list to edit it, or use the row buttons to hide or remove it.

Agent can add text effects (Text reveal, Typewriter, Scramble, Count up, and Highlight) and wiggles, a looping organic movement on one property. Ask for them in the chat.

Presets, text effects, and wiggles are bars on the timeline. Drag a bar to move it in time, or drag an end to stretch it.

Edit the timeline

• Drag the end of the timeline to change its duration.
• Zoom with Cmd + scroll.
• Switch the time readout between milliseconds and seconds.
• Click the playback button to cycle between Loop, Ping-pong, and Play once.
• Drag the work area's edges to play and export only part of the timeline. Double-click it to clear it.

Set triggers

Triggers decide what plays each part of a frame's timeline when the design is used. Click Add trigger on the Triggers row of the timeline and pick one:

In the trigger editor:

• On (or Layer for In view): the layer it acts on. Select a layer on the canvas and click Use the selected layer.
• Playback: how it plays, for example Loop or Ping-pong on page load, Play, then back or First click only on click, and First time only or Every time in view.
• Delay for page load, and the Scroll range in pixels for scroll.
• Plays: the start and end time of the part it plays. Hover and press can add a second part for Leave or Release, and click can add parts for each next click.

To try your triggers on the canvas, click Interact in the timeline header, or press I. Clicks, hovers, presses, and scrolling then play the parts of the timeline they start. Press Escape to stop.

Present a prototype

Click Present in the canvas toolbar, or press Cmd + Option + Return. Each frame on the page becomes a screen. Clicks, hovers, and scrolling play their triggers. Links between screens, such as a tab or a back button that Agent wired up, go to their screens.

If the page has no frames, add one first: each frame is one screen of the prototype.

Bring in motion from a website

Record an animation in the built-in browser, or run Deep Capture, and paste the result on the canvas. The recorded motion arrives as keyframes you can edit here. See Capture websites.

Export animations

Export an animated frame as MP4, WebM, GIF, MOV, a PNG sequence, Lottie, or an animated SVG. See Export.

When Agent builds an animated design in code, it uses the same timing, easing, and triggers.

Next steps