Scroll Presentation Block
Embed a scroll-driven presentation diagram directly in a content page. The diagram advances as the reader scrolls, creating a cinematic walkthrough experience.
The Scroll Presentation block embeds a presentation diagram inside a content page and drives it with scroll position rather than click-based navigation. As the reader scrolls through the page section, the diagram advances through its steps - elements appear, the viewport pans and zooms, and annotations reveal themselves in sequence. The effect is a cinematic walkthrough that unfolds naturally as the reader progresses.
The block uses a sticky frame that pins the diagram in view while the scroll region provides the progression. A progress indicator shows the reader how far through the presentation they have scrolled.
When to Use
Configuration
The following properties control the scroll presentation behaviour and appearance.
| Property | Type | Description |
|---|---|---|
| Diagram Reference | Select | The presentation diagram to embed. Select from published presentation diagrams in the project. |
| Title | Text | Optional heading displayed above the presentation frame. |
| Subtitle | Text | Optional secondary text below the title. |
| Frame Height | Number | Height of the sticky presentation frame in pixels. Defaults to 600. |
| Scroll Length | Select | How much scroll distance maps to the full presentation: Short (2x frame height), Medium (4x), or Long (6x). Longer values give the reader more time on each step. |
| Accent Colour | Colour | Colour used for the progress indicator and step markers. |
| Background | Colour | Background colour behind the diagram frame. Defaults to transparent. |
| Show Progress Bar | Toggle | Whether to display a horizontal progress bar above the diagram. Defaults to true. |
| Show Step Labels | Toggle | Whether to display step name labels alongside the progress bar. Defaults to false. |
| Transition Easing | Select | Easing function for step transitions: Ease In Out, Linear, or Spring. Defaults to Ease In Out. |
How It Works
The block calculates the reader's scroll position within the designated scroll region and maps it to a step index in the presentation diagram. As the position crosses a step boundary, the diagram transitions to the next step using the same animation system as the standard presentation viewer - viewport panning, element visibility changes, and annotation reveals all apply.
The sticky frame keeps the diagram visible throughout the scroll region. Once the reader scrolls past the region, the frame unsticks and the diagram remains on its final step.