Browse documentation

Fine-tune motion in the Graph Editor

See a property's whole animation as one curve and drag it into shape.

The Timeline shows when things happen — a clip's length and position tell you the start and duration of an animation, but not the shape of the motion inside it. The Graph Editor is the other view of the same data: instead of a bar on a track, every numeric property animation draws as a value-over-time curve, so you can see and drag the actual motion instead of imagining it from an easing name.

Opening it

The Graph Editor lives in its own tab next to the Timeline, at the bottom of the editor. Click Graph Editor in that tab strip to switch; click Timeline to switch back. Both tabs share the same playhead, and switching tabs never changes your selection.

Reading the curves

Each row on the left names one animated property — the object and the field, like "Circle · Opacity." Its curve on the right plots that property's value (vertical axis) against scene time (horizontal axis), using the exact same easing and speed-ramp math the render uses, so the curve you see is the curve you get.

A dashed flat line before and after the solid curve shows the property's resting value outside the animation's own time window — the value it holds before the keyframe starts, and after it ends.

By default only the currently-selected object's curves are shown. Turn off Selected only in the toolbar to see every numeric keyframe in the project at once, useful for comparing the timing of several objects' motion side by side.

Editing a curve

Every curve has two draggable ends — one at its from value, one at its to value:

  • Drag an end up or down to change the value the animation starts or ends at.
  • Drag an end left or right to retime the event — moving the left end shortens or lengthens the event from its start, moving the right end trims or extends its duration.

Both kinds of drag are one continuous edit: release the pointer and it becomes a single undo step, exactly like dragging a clip on the Timeline.

Clicking anywhere on a curve or its row label selects that animation event — the same selection the Timeline and the Inspector's Anim tab use, so you can jump into the Inspector to change its easing curve or speed ramp without losing your place.

The Graph Editor only plots numeric properties — position, opacity, radius, font size, and so on. Color and other non-numeric properties still only show their ◆ diamonds on the Timeline; see Keyframe any property.

When to reach for it over the Timeline

The Timeline is faster for laying out when things happen relative to each other. The Graph Editor is better once the timing is roughly right and you're refining how something moves — checking whether an ease-out is too abrupt, nudging a to value without opening the Inspector, or comparing two objects' motion curves to line up a beat. For the underlying model both views edit — from/to/start/duration, and how chained events resolve their starting value — see How keyframes and time work.