The sidebar.

A flat list of every animation defined for the current page, newest at the top. Each entry shows:

• An icon indicating the animation type (Time, Scroll, or Background).
• The element’s alias if you named one, or its CSS selector otherwise.
• A small color swatch used to identify it across the editor.
• An expand caret if the animation has a per-property timeline.

When you switch to a different page using the URL bar in the toolbar, the sidebar refreshes to show only the animations on that page.

At the top of the sidebar are four buttons. Each one creates a new entry of that type, ready to configure:

• + Scroll creates a scroll-animate. Two scroll checkpoints are auto-generated and the new animation references them. See Scroll checkpoints.
• + Timecreates a time-animate. Default trigger is “in view”, default duration is 1 second.
• + Background creates a WebGL background. You choose the effect (Aurora, Dot Grid, etc.) in the right panel. See WebGL backgrounds.
• + Group creates an empty group container. Drag time-animate entries into it to choreograph them together. See Grouping animations.

Click any entry in the sidebar to select it. The right panel updates with that animation’s configuration, and the element it targets gets highlighted in the canvas with a green outline.

• Single click: select one animation.
• Ctrl+Click / Cmd+Click: add to selection. Useful for grouping.
• Shift+Click: select a range from the last clicked entry.
• Click outside the list: deselect everything.

Existing time-animations can be moved into a group by dragging them onto the group’s row in the sidebar. The animation joins the group’s shared timeline at delay zero, and you can fine-tune its position from the timeline below the canvas.

Only time-animate entries are draggable. Scroll animations and backgrounds aren’t groupable because they don’t share a clock.

The button pinned to the bottom of the sidebar: + Pick element to animate. Clicking it puts the editor into pick mode so you can choose any element on the canvas with a click.

After you pick, a small modal asks what kind of animation you want to apply (Text, Scroll, or Time). Choose one and a new entry appears in the sidebar, already targeting your element.

For a deep look at how the picker decides what you’re pointing at, see Picking an element.

• Picking an element: the picker’s rules for choosing the right thing.
• Naming targets with aliases: turn cryptic CSS selectors into readable labels.
• Grouping animations: choreograph multiple animations on one timeline.