---
title: "Edit animation and keyframes"
sidebarTitle: "Animation and keyframes"
description: "Read existing motion, add and retime keyframes, record gestures, shape paths, and handle generated animation."
---

Animation changes a property over time. A keyframe records an important value
at a particular moment; Studio draws editable keyframes as diamonds on the
timeline.

<div className="not-prose my-7 max-w-2xl overflow-hidden rounded-xl border border-zinc-200 bg-zinc-950 dark:border-zinc-800">
  <video
    className="aspect-video w-full object-cover"
    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.mp4#t=0.1"
    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.jpg"
    autoPlay
    muted
    loop
    playsInline
    preload="metadata"
  />
  <div className="px-3 py-2 text-sm text-zinc-600 dark:text-zinc-400">
    Select an element, place the playhead, and add a keyframe.
  </div>
</div>

## Start by reading the existing movement

1. Select the animated element on the canvas, in Layers, or on the timeline.
2. Expand its animation properties.
3. Move the playhead across the existing diamonds.
4. Play from before the movement until after it ends.

Identify the actual problem before editing: the movement may start too late,
take too long, travel along the wrong route, or accelerate in the wrong way.
Those need different changes.

## Add or change a keyframe

Move the playhead to the moment you want to define. Use the keyframe control in
the timeline toolbar, or press **K** while the selected element supports
keyframes. Then change the property that should animate.

To change existing motion:

- drag a diamond earlier or later to retime it;
- change the property value at that keyframe;
- press **Delete** to remove a selected keyframe;
- press **H** to switch selected keyframes between hold and bezier behavior;
- press **U** to expand or collapse the selected element's keyframe properties.

`K` is context-sensitive: it adds a keyframe when an editable animated
selection can use it; otherwise it remains the playback stop shortcut.

## Use auto-keyframe deliberately

Auto-keyframe starts enabled. While it is on, a supported canvas or Inspector
change at the current playhead time is recorded as animation.

This is useful when you want to pose the element at two moments:

1. move the playhead to the first moment and set the first value;
2. move to the second moment and set the next value;
3. play through the movement Studio created between them.

Turn auto-keyframe off before correcting a layout value that should remain
constant throughout the clip.

## Retime before redesigning

Moving keyframes closer together makes the change happen faster. Moving them
farther apart gives the viewer more time to follow it.

Judge the edit inside the scene. A movement that looks smooth by itself can
still arrive too late for the narration or overlap the next action.

## Shape the easing

Easing controls how a value accelerates and slows between keyframes.

- Use a hold when the value should change without interpolation.
- Start with an easing preset when you want a familiar acceleration pattern.
- Use the speed curve when the preset is close but the start, stop, or
  overshoot still feels wrong.

Do not choose easing from the curve alone. Play the entrance, readable hold,
and exit together.

## Shape a motion path

Position keyframes can expose a path over the canvas.

- Drag a point to change the route.
- Adjust a segment when the movement should curve.
- Keep a straight route when direct movement is clearer.
- Use auto-rotate only when the element should face its direction of travel.
- Hold **Option/Alt** while dragging the element to move the complete path.

Add path points only when they make the intended route easier to control.

## Record a movement you can perform

Gesture recording is useful when the motion is easier to demonstrate than to
describe.

1. Select the element.
2. Choose **Record gesture** or press **R**.
3. Move the pointer to perform the motion.
4. Press **R** again to stop.
5. Play the result and refine the generated keyframes.

During recording, drag captures position and scroll captures depth. The
built-in shortcuts panel lists modifiers for rotation, 3D rotation, opacity,
and scale.

Recorded motion is a starting performance, not automatic polish. Simplify a
noisy path and retime it against the rest of the scene.

## Edit animation created by an agent or helper

Studio can display motion whose values were generated by a loop, helper, or
runtime expression, but it cannot always rewrite that source safely.

- **Unroll to edit** rewrites supported helper- or loop-generated motion as
  explicit tweens that Studio can edit.
- **Computed value — edit it in the Code tab** means the value must be changed
  in source.
- When the intent is easier to state than the implementation, copy the element
  context to your agent and describe the result you want preserved.

```text
Keep the same curved route, but make the movement finish with the voiceover
instead of two beats later.
```

## Review the finished motion

- The motion should reveal, direct attention, show change, or connect states.
- Important text needs enough still time to be read.
- Several unrelated movements should not compete in the same moment.
- Check the transition into and out of the scene.
- Run the project preview at the intended frame rate before approving it.

For source-level GSAP behavior and the seekable timeline contract, use the
[developer animation guide](/guides/gsap-animation). For every implemented
keyboard action, use [Studio shortcuts](/studio/shortcuts).

## Related topics

- [Edit timing on the timeline](/studio/timeline)
- [Edit the frame](/studio/canvas)
- [Use Studio keyboard shortcuts](/studio/shortcuts)
