mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
56 lines
2.1 KiB
Plaintext
56 lines
2.1 KiB
Plaintext
---
|
|
title: "Edit animation and keyframes"
|
|
description: "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).
|