How to Use Scroll States in Builder 2.0

Overview

A Scroll State is a named position within a scrolling page or scroll container. Once defined, scroll states let you:

• Navigate directly to a specific scroll position from the Scroll States panel or with keyboard shortcuts

• Apply per-state backgrounds and tile visibility settings — so content appears or changes as a viewer reaches each state

• Target scroll states from click events — a tile click can navigate a viewer directly to a named scroll state

Note: Scroll States are supported in both Builder 1.0 and Builder 2.0. Builder 2.0 added the same functionality for feature parity with 1.0. This guide covers the Builder 2.0 experience — the Scroll States panel, per-state Properties panel, and keyboard shortcuts described below are specific to Builder 2.0's interface.

The Scroll States Panel

The Scroll States panel in the Builder 2.0 sidebar lists all scroll states defined for the current page or scroll container. From the panel you can:

• See each state's name and scroll offset

• Click a state to jump the canvas to that position

• Add, rename, reorder, and delete states

• Drag states to reorder them in the panel (reordering does not change their scroll offsets — only their display order)

Changes to a state's offset are synchronized in real time between the canvas and the panel — scrolling the canvas while a state is selected updates its offset immediately.

Creating a Scroll State

1. Open a microapp in Builder 2.0.

2. Open the Scroll States panel in the sidebar.

3. Scroll the canvas to the position where you want to define a state.

4. Click Add State (or the + button) in the panel.

5. The new state is created at the current canvas scroll position with a default name (e.g., State 1).

6. Double-click the state name to rename it.

Editing a Scroll State

1. Click the scroll state in the Scroll States panel to select it — the canvas scrolls to its current position.

2. Scroll the canvas to the new desired position.

3. The state's offset updates automatically as you scroll while it is selected.

4. Use the Properties panel to configure per-state settings — background, tile visibility overrides, and other state-specific properties.

Keyboard Shortcuts

You can navigate between scroll states without using the panel:

Action	Shortcut
Next state	Cycle forward to the next scroll state
Previous state	Cycle backward to the previous scroll state
Jump to state	Select a specific state using the assigned hotkey sequence

For the full hotkey reference, see the Builder 2.0 keyboard shortcut guide.

Per-State Properties

When a scroll state is selected, the Properties panel shows settings scoped to that state:

Property	What it does
Name	The label for this state — displayed in the panel and referenced in click events
Scroll offset	The pixel position of the canvas when this state is active — set by scrolling while the state is selected
Background	Optional background image or color for this state — overrides the page default without affecting other states
Visibility overrides	Show or hide specific tiles differently for each state — enables content reveal tied to scroll position

Targeting Scroll States from Click Events

Scroll states are addressable by name from click events. You can configure a tile's click event to navigate directly to any named scroll state on the current page or another page.

For setup instructions, see How to configure click events for scroll state navigation.

Exporting and Importing Microapps with Scroll States

Scroll state definitions are included in microapp export packages automatically.

To export: Use the standard Export action from the Library. The exported package includes all scroll state names, offsets, and per-state property configurations.

To import: Import the package into any Tiled Library using the standard import flow. All scroll states are restored with their original names and offsets.

To verify after import: Open the Scroll States panel and confirm all states are listed at their correct offsets.

Common Questions

Can I use Scroll States in Builder 1.0?

Yes — Scroll States are supported in both Builder 1.0 and Builder 2.0. Builder 2.0 added the same functionality for feature parity with 1.0. The Scroll States panel and keyboard shortcuts described in this guide are specific to the Builder 2.0 interface.

Does reordering states in the panel change their scroll positions?

No — drag-to-reorder in the panel changes the display order only. Each state's scroll offset is unchanged by reordering.

Can scroll states be nested inside scroll containers?

Yes — scroll states within nested scroll containers resolve independently of the outer container's states.

Can I apply a different background to each scroll state?

Yes — use the Background property in the Properties panel while the target state is selected. The background applies to that state only and doesn't affect other states on the same page.

What happens to scroll states when I export and reimport a microapp?

All scroll states — names, offsets, and per-state configurations — are included in the export package and restored on import.