> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit animation and keyframes

> Adjust motion, timing, easing, paths, and recorded gestures.

Animation controls how a property changes over time. Keyframes mark important values at specific moments.

## Find an animation

Select an element, then open its animation or motion controls. Existing keyframes also appear as diamonds on the timeline.

Move the playhead to a keyframe to inspect the element at that moment.

## Add or change a keyframe

1. Select the animated element.
2. Move the playhead to the desired time.
3. Add a keyframe or change an animated property.
4. Play through the movement.

You can move, retime, or delete keyframes when the change should happen earlier, later, or not at all.

## Adjust easing

Easing controls how motion accelerates and slows down between values.

Start with a preset that describes the intended feeling. Use the speed curve when a preset is close but the movement still starts, stops, or overshoots incorrectly.

Judge easing in motion. A curve cannot tell you whether the viewer has enough time to understand the scene.

## Auto-keyframe a manual edit

The auto-keyframe control is enabled when it is highlighted in the timeline
toolbar. Move the playhead, then adjust the element on the canvas or in the
inspector.

Studio records the change as animation instead of applying one constant layout value.

Turn it off before a normal design edit that should remain constant for the
whole clip.

## Record a gesture

Gesture recording is useful for movement that is easier to perform than describe. Record the path, then refine its timing and shape.

Use motion-path controls to adjust nodes, smoothing, arcs, and orientation when the recorded movement needs cleanup.

## Keep motion useful

* Animate a reason: reveal, direct attention, show change, or connect two states.
* Give important text enough time to be read.
* Avoid several unrelated movements competing in the same moment.
* Play the transition into and out of the scene, not only the animation in isolation.

For lower-level GSAP details, use the [developer animation guide](/guides/gsap-animation).