Skip to main content
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.
Select an element, place the playhead, and add a keyframe.

​
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.

​
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. For every implemented keyboard action, use Studio shortcuts.

Related topics

Edit OperationsTiming & AnimationEdit the frame