Skip to main content
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.
The auto-keyframe button is enabled when it is highlighted. Turn it off before making a normal layout change that should remain constant.

​
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. For the source contract, use the GSAP animation guide.