mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-08 15:57:01 +00:00
74 lines
2.5 KiB
Plaintext
74 lines
2.5 KiB
Plaintext
---
|
|
title: "Shape motion with keyframes"
|
|
description: "Add, retime, and refine keyframes, motion paths, and recorded gestures in Studio."
|
|
---
|
|
|
|
Keyframes describe how an element changes between specific moments. Studio shows
|
|
the keyframes it can read from GSAP animations as diamonds on the timeline.
|
|
|
|
## Change when motion happens
|
|
|
|
1. Select the animated element.
|
|
2. Move the playhead to the relevant moment.
|
|
3. Select a keyframe diamond.
|
|
4. Move it earlier or later.
|
|
5. Play through the complete movement.
|
|
|
|
Retiming one keyframe changes the speed of the movement around it. Watch the
|
|
entrance and exit, not only the selected frame.
|
|
|
|
## Add a keyframe
|
|
|
|
Select an element and move the playhead to the new moment. Use the keyframe
|
|
control in the timeline toolbar or press **K** when the selection supports
|
|
keyframes.
|
|
|
|
Change the property that should animate, then play the result. The Design
|
|
inspector can expose timing, easing, and supported animated properties for the
|
|
selected tween.
|
|
|
|
<Warning>
|
|
The auto-keyframe button is enabled when it is highlighted. Turn it off
|
|
before making a normal layout change that should remain constant.
|
|
</Warning>
|
|
|
|
## Shape a motion path
|
|
|
|
When an animation has position keyframes, Studio can show its path over the
|
|
canvas.
|
|
|
|
- Drag a path point to change the route.
|
|
- Adjust a segment when the movement should curve.
|
|
- Use auto-rotate only when the element should face the direction of travel.
|
|
- Add or remove points only when they improve the shape.
|
|
|
|
Use a curve for motion that should feel thrown, guided, or organic. Keep a
|
|
straight path when direct movement is clearer.
|
|
|
|
## Record a gesture
|
|
|
|
Gesture recording is useful when the movement is easier to perform than
|
|
describe.
|
|
|
|
1. Select the element.
|
|
2. Choose **Record gesture** or press **R**.
|
|
3. Move the pointer to perform the motion.
|
|
4. Stop recording.
|
|
5. Play the result and refine the generated keyframes.
|
|
|
|
Studio can record position and supported transform changes. The shortcut panel
|
|
shows the available drag and scroll modifiers.
|
|
|
|
## When Studio cannot edit the animation
|
|
|
|
An animation produced by a helper, loop, or computed value can be visible on the
|
|
timeline without having one safe source expression for Studio to rewrite.
|
|
|
|
When Studio offers **Unroll to edit**, it can turn supported generated motion
|
|
into explicit tweens. Otherwise, copy the element context to your agent or edit
|
|
the source directly.
|
|
|
|
For easing and animation principles, continue to [Edit animation and
|
|
keyframes](/studio/animation). For the source contract, use the [GSAP animation
|
|
guide](/guides/gsap-animation).
|