Glopzi
Sign up

Advanced

Editing keyframes.

The mechanics of moving, retiming, adding, and removing the checkpoints inside an animation. Same model for time and scroll; different axes.

What a keyframe is

A keyframe declares the state of an element at a specific point in the animation. “At 0%, opacity is 0 and translate Y is 30. At 100%, opacity is 1 and translate Y is 0.” Glopzi interpolates between keyframes to produce motion.

In Glopzi we also call them checkpoints. Same thing. The terminology is interchangeable across the editor and these docs. See the glossary if you want a one-liner.

Note

Glopzi’s keyframes are declarative, not delta-based. Each one says “this is where the element is at this moment”, not “move it 30 pixels from where it was”. This matters for multi-keyframe sequences. See Declarative keyframes.

The panel and the timeline

You edit keyframes from two places that stay in sync:

  • The right panelshows the selected keyframe’s values across all properties at once (opacity, transform, blur, color, etc.). This is where you change what the element looks like at that moment.
  • The timeline below the canvas shows keyframes as diamonds positioned along the X axis. This is where you change when they happen.

Click any diamond on the timeline to focus the panel on that keyframe. Drag in the panel to change values; drag on the timeline to change timing.

Moving keyframes on the timeline

Drag a diamond left or right to retime its keyframe. The motion in the canvas updates live as you drag, so you can see the result of the new timing before you let go.

  • Time animations: position is in seconds. Dragging a keyframe past another reorders them.
  • Scroll animations: position is relative to the start and end checkpoints. Dragging adjusts where in the scroll range the value is hit.
  • Edges of the timeline track: dragging the right edge of an animation bar changes its total duration. Dragging the left edge of a group member changes when it starts within the group.

Tip

Hold Shift while dragging the right edge of an animation to scale all internal keyframes proportionally instead of preserving absolute timing. Useful when you want to make the whole sequence faster or slower as a unit.

Editing values in the panel

The right panel groups properties into rows. Each row has:

  • A plus iconto enable the property if it’s not active for this animation yet.
  • A caretto expand or collapse the row’s controls.
  • One or more value inputs: sliders for numeric properties, color pickers for color properties, text inputs for everything else.
  • An X icon to remove the property from the animation entirely.

Sliders accept text input directly: click the number, type a value, press Enter. Useful when you want a precise value a slider can’t hit comfortably.

The full list of animatable properties and their units is in the Properties reference.

Per-property timing

By default, all properties on a keyframe share the same timing: they all hit their values at the same moment. To stagger them, expand the timeline track and you’ll see one sub-row per property, each with its own draggable diamond.

Drag the opacity diamond to 50% while the translate diamond stays at 100%, and you get an opacity that fades in halfway through while the translate finishes at the end. Powerful for layered reveals.

Each property keeps its own line through the entire animation. Adjusting one doesn’t affect the others.

Adding and removing

To add a keyframe:

  • From the panel: click + Add checkpoint in the checkpoints row. A new keyframe is inserted at the playhead position with the current interpolated values.
  • From the timeline: double-click on a track at the position you want a new keyframe.

To remove a keyframe:

  • Right-click the diamond on the timeline and choose Delete.
  • Or open the keyframe in the panel and click the trash icon next to its position label.

Animations need at least two keyframes (start and end) to interpolate. Glopzi prevents you from deleting one that would leave the animation with fewer than two.

Next steps