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.
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.
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.
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
Use Cases
Embedding a Scroll-Driven Presentation
Turn any architecture diagram into a step-by-step animated presentation with 4 visibility actions, audio narration, viewport animation, speaker notes, and multiple standalone presentations per diagram.
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.
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, 100+ styled content blocks, six D3 visualisation layouts, and complete theme customisation, all from the same source content.