Play, pick a time, and move keyframes on the timeline.

In Animation mode, the Objects list spreads wide across the bottom of the screen and becomes the timeline. The button row at the top handles playback and the clock. Below it, the ruler and rows are where you pick a time and work with keyframes.

ToolBeginnerAbout 4 minAnimation modeWebDesktopTablet

**Timeline**Labels appear one by one on the button row, the ruler, the playhead, the object row, and the scene row. Video: On the Animation mode timeline, labels appear one by one on the clock name, the playback buttons, Auto-keyframe and Add key, the time fields and frame rate, the ruler, the playhead, the object row, and the scene row.

Clock and playback

This is the group on the left of the button row. Hover over an icon to see its name.

Timeline clock

The name at the very start of the button row is the clock you’re working on. For the scene’s clock it reads “Scene”. When you open a frame’s clock, it becomes a path such as “Scene › Card”. Click an earlier name to go back to that clock. Frame clocks covers a frame’s clock.

Jump to start · Jump to end

Moves the playhead to 0 seconds, or to the end of the clock duration. These buttons sit on either side of the play button.

HomeTo the start
EndTo the end

Play · Pause

Space

Plays from the playhead and stops at the end of the clock duration. If the playhead is at the end, it plays from the start. While it plays, the button turns into a pause button.

Click the buttonPlay · pause
SpaceA short press does the same
Space+drag the canvasHold it and drag to move the view

**Play · Pause**Clicking Jump to start and then Play slides the circle, and the playhead keeps moving after it stops. Video: Clicking the Jump to start button returns the playhead and the circle to the beginning. Clicking Play then makes the circle glide to the right over 0.5 seconds while the playhead keeps moving.

Loop

When it’s on, playback starts over from the beginning each time it reaches the end. It’s handy for running the motion again and again while you refine it. The browser remembers whether it’s on or off.

Play the work area only

When it’s on, the editor plays only the span you set as the work area. Stops and the work area covers the work area.

Add stop point

Places a stop at the playhead. Playback halts at a stop, and in a presentation it waits there for a click. See Stops and the work area for details.

Recording keyframes

Auto-keyframe

The diamond-shaped button with a round hole in the middle. When it’s on (blue, the default), each value you change in Animation mode becomes a keyframe at the playhead’s time. When it’s off, only values that already have keyframes are recorded, and other changes go to the object itself. The browser remembers whether it’s on or off. See Work with keyframes for details.

Add key

The diamond button with a plus (+) cut out of the middle. It sets keyframes at the playhead right away from the selected object’s current values. It adds one for each value that already moves. On an object with no keyframes yet, it keys position, rotation, scale, and opacity. Use it to hold the current look before the next move.

View and clock settings

Graph view

Shows the keyframe rows as curves of value over time. Click it again to go back to the rows. Graph view explains it.

Playhead time · Clock duration

Two number fields. The left one is the playhead’s time: type a number and press ↩ to go to that time. The right one is the length of the clock you’re working on, 5000 ms at first. You can’t make it shorter than the last keyframe or stop.

Frame rate

Frames per second (60 at first, 1–240). Playback draws the motion at this interval, so a low value such as 12 gives a choppy, frame-by-frame feel.

Ruler unit

The “ms / frame” button. When it’s set to ms, the ruler shows seconds (0.5s) and the time fields show milliseconds. When it’s set to frame, both show frame counts (30f), and the playhead snaps to frames.

Timeline zoom

Changes how much time the ruler shows. At first you may see only about 1 second, so press F or double-click the slider to fit the whole clock.

Drag the sliderChange the span
F · Double-clickFit the whole clock
⌘+scroll wheel · ⌥+scroll wheelZoom in · out around the pointer

The ruler and rows

Ruler

The time scale at the very top. Click or drag on it and the playhead follows, and the canvas shows the scene at that time. A click without ⇧ can land a few ms off a tick mark. To land on an exact time, hold ⇧ and drag to snap to keyframes, stops, and tick marks, or type a number in the time field.

Click the rulerGo to that time
Drag the rulerScrub through time
⇧+drag the rulerSnap to keyframes · tick marks

Playhead

The blue vertical line that marks the current time. The canvas always shows this moment, and values you change in Animation mode become keyframes at this time.

J · KPrevious · next keyframe
⇧J · ⇧KWithin the selected object’s keyframes

Object row

Each object has one row. A dot marks each time that has keyframes, and a bar joins the first and last dots. Drag a dot and all the keyframes at that time move together. Double-click a dot to open the Motion - Keyframe panel (Motion - Keyframes when it holds more than one).

Drag a dotMove it in time
Double-click a dotChoose a curve

**Object row**Dragging the last dot to the right stretches the bar out to that time. Video: Dragging the dot at 0.5 seconds in the Ellipse 1 row to 0.8 seconds stretches the row’s bar out to 0.8 seconds.

Property rows

Click the arrow to the left of an object’s name to expand a row for each value that has keyframes (“Position X”, “Opacity”, “Fill 1”…). Each row shows that value’s keyframes as diamonds, and you can move them one at a time. Work with keyframes shows how.

Click the arrowExpand · collapse

**Property rows**Clicking the arrow expands a “Position X” row under the circle’s row. Video: Clicking the arrow to the left of the Ellipse 1 name expands a Position X row below it, with its two keyframes shown as diamonds.

Scene row

The bottom row is the scene itself. Keyframes you make on the scene’s background go in this row. Clicking this row deselects objects.

Clip band

When you turn on Sync to Timeline for a video or audio clip, its row shows a bar for the span where the clip plays. Drag the bar to change when the clip starts. Media on the timeline explains it.

List buttons

At the right end of the button row are the same buttons as in the Design mode Objects list. When you select an object, buttons appear to fit the view to the selection, duplicate, and delete; with two or more selected, a group button appears too. The chevron button at the very end collapses the panel down to the button row, and clicking it again expands it. It also helps when the timeline covers the canvas.

Panel height

If the timeline covers the bottom of the canvas, drag the panel’s top edge to make it shorter.

Drag the top edgeChange the height

Badges in Animation mode

Badges in the Scenes list

In Animation mode, badges appear at the bottom right of the thumbnails in the Scenes list. A scene with something to play, such as keyframes or stops, shows its playback length (5s). If you’ve set a work area, it shows the length of that span instead. A scene with a transition turned on also shows the curve it uses when leaving that scene. Click a badge to open that scene’s Motion panel.

Name tag badges on the canvas

On the canvas, a clock icon and the length appear next to the scene’s name, and the clock that’s open in the timeline shows in blue. A scene with a transition turned on gets a curve badge; click it to open the Motion panel. Click the clock badge next to a frame’s name to open that frame’s clock.

Clicking a row leaves the playhead where it is

Clicking an object row selects that object, and dragging across the rows draws a box that selects keyframes. To change the time, click the ruler at the top or type a number in the time field in the button row.

Was this page helpful?

Updated 10/12/2026 · The videos on this page were recorded in the current editor.