Shape the motion in Graph view.
The rows of the timeline show when things move; the graph shows how they move. Turn on Graph view and the keyframe rows turn into curves of value over time. On the curves, you can change keyframe values and speed.
Turning it on and off
Use it on the timeline in Animation mode. Start by selecting an object that has keyframes. If you don’t have keyframes yet, see Your first animation first.
Graph view
The button to the right of Add key in the button row, with a curve drawn inside a pair of axes. Click it and the object rows hide, and value curves are drawn in their place. Click it again to go back to the rows. The ruler, the playhead, and the timeline zoom are shared with the row view. The browser remembers whether it’s on or off.
- Click the buttonTurn on · off
Curves follow the selection
The graph draws the curves of the selected object. Select several and they’re all drawn together. Select nothing and the keyframes of the scene itself (its background) are drawn. The graph has no object rows, so to see another object, click it on the canvas.
- Click on the canvasThat object’s curves
- ⇧+click an objectSeveral objects together
With nothing selected, the graph is empty
With nothing selected, the graph draws the scene’s curves. If the scene has no keyframes, all you see is “No animated tracks on the selection.” Click a moving object on the canvas.
Reading the curves
Left column
Under the selected object’s name, each value that has keyframes gets its own line (“Position X” · “Rotation Z” · “Opacity”…). Next to each name is that value’s unit. Click a name to bring its curve to the front.
- Click a nameBring that curve to the front
Blue and gray curves
The one curve in front is drawn in blue, and the rest in gray. A gray curve has its name next to its first keyframe, and clicking it makes it the blue curve. You can still select and move the keyframes on gray curves.
- Click a gray curveMake it the blue curve
Horizontal and vertical axes
The horizontal axis is time, the same as the ruler above. The vertical axis is the blue curve’s value. Values that measure length, such as position, are in px; rotation and skew are in °; opacity is in %; scale is a plain number. Where the curve is steep, the value changes fast. Where it’s flat, the value changes slowly or holds still. The point where the playhead meets the blue curve is the value at that time.
Strips
Values that can’t be drawn as a single number, such as fills, strokes, effects, text, and path shapes, sit in bands below the curves. In the left column, they’re under “Strip” (“Fill 1”…). A solid fill shows as a band that shifts from one color to the next. You can only move these keyframes in time, not change their values. Click a name to draw its progress as a 0–100% curve.
Editing keyframes on the curves
Selecting keyframes
Click a diamond on a curve to select it, and the playhead moves to its time. Drag from an empty spot to select all the keyframes inside the box. With several selected, drag one and they all move by the same amount.
- Click a diamondSelect
- ⇧+click a diamondAdd · remove
- Drag from an empty spotBox select
- Click an empty spotDeselect
Dragging up and down
Drag a diamond up or down to change its value. The drag locks to the direction you first move in, so the time stays put even if you drag at an angle. Near the height of a neighboring keyframe, it snaps to that value and a horizontal guide appears. Otherwise, px, °, and % values round to whole numbers, and scale rounds to steps of 0.01.
- Drag up or downChange the value
Dragging left and right
Drag a diamond left or right to change its time. It can’t pass the keyframes on either side, so their order never changes.
- Drag left or rightMove it in time
- ⇧+drag a diamondSnap to keyframes · stops · tick marks
Key time · Key value
The two fields at the top of the left column. Select one keyframe to see its time and value. Type a number and press ↩ to set it. The time uses the ruler unit (ms or frames), and the value uses the curve’s unit.
Double-clicking a curve
Double-click the blue curve to add a keyframe at that spot. Its value is the curve’s value right there. But the segments before and after the new keyframe each get a fresh easing, so the curve flattens at that point and the motion slows for a moment. Reshape it with the tangent handles. No keyframe is added right next to an existing one.
- Double-click a curveInsert a key
Fine-tuning speed with tangent handles
Tangent handles
Select a keyframe on the blue curve and lines extend from it, each with a round handle at the end. The handle toward the segment before is the incoming handle, and the one toward the segment after is the outgoing handle, so the first and last keyframes have only one. A handle sets how quickly the motion sets off and arrives in that segment. When you drag a handle, the opposite one moves too, so the curve stays smooth. Drag a handle past the keyframe’s height, and the curve overshoots that value and comes back. With several keyframes selected, they all change to the same shape.
- Drag a handleBoth sides together
- ⌥+drag a handleThis side only
- ⇧+drag a handleOnly horizontally or vertically
How handles relate to easing curves
A handle edits that segment’s easing curve, and a segment’s curve is stored on its earlier keyframe. So an outgoing handle’s curve shows in the Motion - Keyframe panel you open by double-clicking that keyframe, and an incoming handle’s curve shows in the one for the keyframe before it. A curve you change in the panel shows in the graph only after you click Apply. It works the same way as curve editing in Fine-tune transitions.
Where handles don’t work
Segments switched to a spring or to Step have no handles. Between two keyframes with the same value, dragging a handle doesn’t bend the curve; only the segment on the other side changes. To make that stretch rise, double-click the curve to add a keyframe, then drag it up. If a handle sits right on a neighboring keyframe, you grab the keyframe instead of the handle. Widen the view with the timeline zoom slider, then drag the handle.
Fitting the view
Graph value zoom
Shortcut ⇧FWith Graph view on, a slider marked ↕ appears on the right of the button row. Drag it to stretch or shrink the vertical axis. Double-click it or press ⇧F to fit the curves to the graph’s height again. This zoom is a viewing setting, so it isn’t saved in the document.
- Drag the sliderStretch · shrink vertically
- Double-click · ⇧FFit again
- ⌘⇧+scroll wheelZoom in · out around the pointer
- Drag with the middle buttonMove up and down
Timeline zoom
Shortcut FFit the horizontal span the same way as in the row view: with the slider or F.
Shortcuts on this page
| Fit the graph value axis | ⇧F |
|---|---|
| Fit the timeline to the screen | F |
| Zoom the graph value axis in · out | ⌘⇧+scroll wheel |
| Add or remove keyframes from the selection | ⇧+click a keyframe |
| Adjust one side of a tangent only | ⌥+drag a handle |
| Keep a tangent horizontal or vertical | ⇧+drag a handle |
Updated 10/15/2026 · The videos on this page were recorded in the current editor.