Grouping animations.

Without a group, every time animation has its own clock. A fade-in on a heading and a fade-in on a button are two unrelated events, even if they look similar. To choreograph them, you have to manually align their delays and durations and hope they stay in sync as you tweak.

A group makes them share. One timeline, one playhead, one play/pause button. Each member animation has its own delay relative to the group’s start, but they advance together when the group plays. Tweak any member and the rest stay in their relative positions automatically.

Three ways to make a group:

• Multi-select then group. In the sidebar, click two or more time animations using Ctrl+Click / Cmd+Click, then press Ctrl+G / Cmd+G. A new group wraps them, preserving their existing delays.
• Right-click menu. With one or more time animations selected, right-click any of them and choose Group selection.
• Empty group from the sidebar. Click + Group at the top of the sidebar. An empty group entry appears, ready to receive members via drag.

New groups get a default alias like “Group 1”. Double-click the entry in the sidebar to rename it. See Naming targets with aliases.

Two ways to put more animations into an existing group:

• Drag them in. Grab a time animation in the sidebar and drop it onto the group’s row. It joins at delay zero. You can adjust its position afterward.
• Multi-select and group again. Select the existing group and the new animations together with Ctrl+Click / Cmd+Click, press Ctrl+G / Cmd+G. The new animations join the existing group rather than creating a nested one.

Group membership is one-deep: a group can contain animations, but not other groups. This keeps the timeline readable and the choreography easy to reason about.

Selecting a group in the sidebar opens its choreography in the timeline below the canvas. Each member becomes a stacked row, anchored to the group’s shared X axis.

• The playhead is shared. Pressing play runs all members together.
• Each member’s position is its delay within the group. Drag the bar left or right to change when it starts.
• Each member’s width is its duration. Drag the right edge to shorten or extend it.
• Each member can still be expanded into per-property sub-rows. See Editing keyframes.

The group’s total duration auto-adjusts to fit its longest member. You don’t set a group duration manually.

To remove one member from a group:

• Drag it out of the group, back into the top-level sidebar list.
• Or right-click the member and choose Remove from group. It returns to the top-level list with its current delay and duration preserved.

To dissolve the entire group while keeping its members:

• Right-click the group entry and choose Ungroup. The group container disappears and each member becomes a top-level animation again. Their individual delays are preserved as absolute delays from page load.

To delete the group and its members, right-click and choose Delete group. Glopzi confirms before destroying multiple animations.

Groups are powerful but they’re not free. Skip them when:

• Two animations happen on completely unrelated parts of the page and unrelated triggers. Grouping them adds cognitive overhead with no payoff.
• You only have one animation. A group of one is just an animation with extra wrapping.
• You want one animation to depend on another finishing. Glopzi groups don’t have explicit dependencies; they’re a shared timeline. Use delays to sequence, or chain with triggers (one fires “in view”, the other on click of the first’s target).

• The timeline: playhead, zoom, scrub, and group track stacking.
• Editing keyframes: per-property timing inside each group member.
• Time-based animations: the type of animation groups can contain.