Glopzi
Sign up

Interface

The timeline.

The horizontal panel below the canvas. It shows your selected animation as one or more tracks, lets you scrub through time (or scroll), and gives you per-property keyframe access when expanded.

What the timeline shows

The timeline appears when you have an animation selected. It contains:

  • A header with mode badge (SCROLL or TIME), zoom controls, and play/pause for time animations.
  • One or more tracks, one per animation in the selection. Multi-selecting in the sidebar stacks additional tracks on top of each other.
  • A playhead, the vertical line that marks current time or scroll position.
  • Tick marks along the top edge: seconds for time animations, scroll-checkpoint labels for scroll animations.

When nothing is selected, the timeline collapses to a thin strip and stays out of your way.

Scroll mode vs time mode

The same panel adapts based on what kind of animation you’ve selected.

  • SCROLL mode. The X axis represents the range between the animation’s start and end scroll checkpoints. Tick marks show each checkpoint by name. The playhead follows the iframe’s scroll position in real time.
  • TIME mode. The X axis is seconds, from 0 to the animation’s duration. Tick marks adapt to duration: every 0.1s for short animations, every 30s for long ones. The playhead is draggable.

The mode badge in the timeline header (a small SCROLL or TIME chip) tells you which one you’re in without ambiguity.

The playhead

A thin vertical line you can drag horizontally. What it does depends on the mode:

  • In SCROLL mode, the playhead reflects where the visitor would be in the scroll range. Dragging it scrolls the canvas to match. Useful for scrubbing through a long scroll sequence without using your mouse wheel.
  • In TIME mode, the playhead is a scrubber. Drag to set time, then click play to run from that point. The play/pause button in the header is synced with the same control inside the right panel.

Tip

For time animations, dragging the playhead is the fastest way to verify a specific frame. Pause, drag, eyeball, adjust values in the right panel, repeat.

Zoom

Three ways to change the timeline zoom:

  • The +/- buttons in the timeline header.
  • Ctrl+Scroll / Cmd+Scroll over the timeline. Zoom centers on the cursor position.
  • + / - / 0 keys when the timeline has focus. 0 resets to 1x.

Zoom range is 1x to 8x. Glopzi remembers your last zoom level per session, so reopening a project picks up where you left off.

Collapse and resize

The timeline starts at a default height. You can adjust it two ways:

  • Drag the top edge up or down to resize. Range: 80 to 500 pixels.
  • Drag below the minimum (80 pixels) to collapse it to a thin strip. The same edge becomes the handle to drag back open.

Your preferred height is remembered between editor sessions.

Per-property rows

A small caret on the left edge of each track expands it into per-property rows. Each row shows the timeline of one property (opacity, translate Y, scale, etc.) with its own keyframes you can drag independently.

This is the view you’ll use most when you want properties to peak at different times. Opacity hits 1 at 50%, scale hits its target at 80%, translate finishes at 100%, and so on. See Editing keyframes for the full mechanics.

Note

Per-property rows are available on time animations and grouped time animations. Scroll animations use shared checkpoints across properties; their per-property sub-rows behave the same way but the X axis is scroll, not time.

Next steps