Scroll-Driven Presentations

Embed architecture presentations that animate with scroll position. The reader controls the pace, scrolling forward to advance and backward to rewind. Uses CSS sticky positioning, a tall scroll runway, smooth interpolation between steps, step indicators with dot navigation, and reduced-motion support.

March 5, 2026

Traditional presentations force a linear, presenter-controlled pace. Scroll-driven presentations hand control to the reader. The diagram stays visually fixed on screen while the page scrolls past it, and the presentation advances through its steps as the reader scrolls. Scroll forward to progress. Scroll backward to rewind. Stop scrolling to pause. The reader sets the pace, absorbs the content at their speed, and revisits any step by scrolling back.

How It Works

The scroll-driven viewer uses three coordinated mechanisms to create the illusion of a presentation responding to scroll.

Tall Scroll Runway

The viewer creates a tall container whose height is proportional to the number of presentation steps. Each step transition occupies 1.5 viewport heights of scroll distance by default, giving the reader enough physical scroll travel for smooth control.

CSS Sticky Positioning

The diagram container is CSS sticky-positioned at the top of the viewport. As the reader scrolls through the tall runway, the diagram stays fixed on screen. The scroll position drives the animation, not the reverse.

Smooth Interpolation

The ScrollDrivenPlaybackController maps the normalised scroll fraction (0 to 1) to interpolated tween states using the same engine as time-based playback. Element visibility, opacity, and viewport position blend smoothly between steps.

The Scroll Controller

At the core of scroll-driven playback is the ScrollDrivenPlaybackController, a pure TypeScript class with no framework dependency. It precomputes the resolved state for every step at initialisation, then produces interpolated frames on demand as the scroll fraction changes.

Property	Description
scrollMultiplier	Viewport heights of scroll travel per step transition. Default 1.5. Higher values give more scroll distance per transition for finer control.
reducedMotion	When enabled, snaps to the nearest whole step instead of interpolating. Respects the user's motion preferences for accessibility.
runwayVh	Total scroll runway height in viewport-height units. Calculated as (transitions x scrollMultiplier) + 1, so that the final step settles fully before the sticky frame unsticks.
seekToScrollFraction(f)	Maps a normalised fraction (0 to 1) to a step index and local progress, interpolates between the two surrounding states, and emits the result.
onStateUpdate callback	Called with a new tween state whenever scroll position changes. The viewer renders the diagram from this state.
onStepChange callback	Called when the nearest whole step changes. Used to update step indicators and dot navigation.

Step Indicators

A floating step indicator appears in the bottom-right corner of the presentation as the reader scrolls. It shows the current step number, total steps, and a row of dots representing all steps. The active step dot is highlighted. The indicator fades in when scrolling begins and fades out when scrolling stops, providing context without visual clutter.

Viewport Animation

Scroll-driven presentations support the same viewport transitions as time-based presentations. When a step has an explicit viewport (zoom and pan position), the viewer smoothly interpolates the viewport as the reader scrolls. This creates the effect of the diagram zooming into different areas as the narrative progresses. The controller uses the same intentional viewport detection as the time-based player, distinguishing between author-set viewports and default frame positions.

Accessibility

Reduced Motion Support

When the reduced motion preference is active, the controller snaps to the nearest whole step instead of interpolating between states. Transitions are instant, eliminating motion that may cause discomfort.

Reader-Controlled Pace

The reader controls the speed entirely. There are no timed transitions, no auto-advance, no forced pace. Readers who need more time on any step simply stop scrolling.

Full Reversibility

Every transition is fully reversible. Scrolling backward rewinds the presentation to any previous state. There is no concept of 'missed' content.

Use Cases

Architecture Narratives

Embed a scroll-driven walkthrough in a documentation page that explains a complex architecture. The reader scrolls through the explanation, and the diagram animates alongside the text, revealing components as the narrative introduces them.

Landing Page Heroes

Use a scroll-driven presentation as a hero section on a documentation home page. As visitors scroll past, the architecture diagram animates through its key states, creating an engaging first impression.

Learning Materials

Create self-paced learning content where each scroll segment introduces a new concept with the corresponding diagram state. Learners control the pace and can revisit any concept by scrolling back.

Migration Journeys

Walk through a migration from current state to target state with each scroll segment representing a phase. Readers see the architecture evolve as they scroll, understanding the transformation sequence.

Embedding a Scroll-Driven Presentation

Animated Presentation Diagrams

Turn any architecture diagram into a step-by-step animated presentation with visibility actions, audio narration, viewport animation, speaker notes, and multiple standalone presentations per diagram.

Slideshow Capture

Build presentation steps instantly by capturing screenshots as you navigate the application. Each screenshot becomes a full-canvas slide with automatic crossfade transitions between steps.

Visual Publishing

NeoArc Studio produces architecture documentation that looks as good as enterprise websites. Animated diagrams, scroll-driven presentations, a full infographic design system, professional PDF publishing, static website generation, styled content blocks, D3 visualisation layouts, and complete theme customisation, all from the same source content.