MixavisdocsHomeCommunityOpen editor
DOCS/Timeline & Graph Editor

Graph Editor

Timeline

Shape the timing by hand, as a curve.

The graph editor plots a property's value against time. The slope of the curve is the speed: steep means fast, flat means stopped. Dragging the handles reshapes the timing without moving the keyframes.

It is the difference between animation that technically moves and animation that feels like something.

Try itKeyframes · easing
The curve is the timing. Slope is speed — flat means the layer is barely moving, steep means it is racing.

When to reach for it#

  • Anything that looks mechanical with default easing.
  • Matching the timing of two properties that should feel connected.
  • Building overshoot, anticipation, and settle by hand.

How it works#

Each keyframe has an incoming and an outgoing handle. Their length controls how long the ease lasts, their angle controls the rate. Dragging a handle out flattens the curve near the key, which means slower there and faster in the middle.

The split panel separates the two sides of a keyframe so you can ease out of one slowly and into the next sharply — an asymmetry that flat easing presets cannot express.

Parameters#

Handleshandles#

Length sets how much of the interval is spent easing. Long handles mean a long slow start.

Handle typehandleType#

Smooth keeps both sides mirrored. Broken lets them move independently, which is how you get a hard stop after a slow build.

Named easingspresets#

A library of standard curves — quad, cubic, elastic, back, bounce. Good starting points; almost always worth adjusting afterwards.

Extrapolationextrapolation#

What happens outside the first and last keyframe. Hold freezes, loop repeats, ping-pong reverses, continue keeps going at the final velocity.

Things that catch people out#

Value graph and speed graph read differently

A flat line in the value graph means "not moving". A flat line in the speed graph means "moving at a constant rate". Reading one as the other is the usual source of confusion.

See also#

timelineKeyframes→driversInertia — overshoot without hand-shaping→

Something here wrong or missing? Tell us in the community.