> ## Documentation Index > Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt > Use this file to discover all available pages before exploring further. # Edit animation and keyframes > 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.
## 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 theme={null} 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) ## Related topics - [Edit Operations](/sdk/reference/edit-operations.md) - [Timing & Animation](/sdk/guides/timing-and-animation.md) - [Edit the frame](/studio/canvas.md)