Scrollytelling only works if the pinned graphic keeps enough context as text scrolls past beside it

What it is

Scrollytelling slices a data story into text segments while the graphic stays pinned to one side of the screen, stepping through states as the reader scrolls (highlighting different segments, switching years, advancing an animation). The form is persuasive and immersive, but its core design constraint is routinely violated: on scroll, all or most of the graphic's context disappears—only the currently highlighted bar remains, only the current year's frame, everything else hidden. Context-losing scrollytelling makes every step "a fragment the author chose to show me"; readers lose the ability to place each step back into the whole and verify it, and the narrative degenerates into a slideshow-style forced display—the very opposite of graphics' core advantage over prose, namely that readers can independently check the relation between whole and parts.

Why it happens

Context preservation is necessary because narrative steps depend inferentially on prior data: nearly every scrollytelling point needs earlier data as reference—"the 2020 leap" needs 2019's value as baseline; "this channel was left behind" needs the other channels still in view. When a scroll transition hides the reference, the point loses its comparative term and the reader's understanding degrades into a series of isolated assertions. This compounds with working memory limits: after several steps of scrolling, the reader can no longer recall values from a few steps back and relies entirely on the interface for a persistent reference. Technically, scroll-driven graphic state changes come in two flavors: hard switching (state replaced instantly) severs the reader's connection between old and new states, while transition switching (highlight gradient, other elements graying but not disappearing) keeps the whole present while shifting visual weight—the implementation basis of context preservation. Redistributing visual weight (current-step elements highlighted, irrelevant elements dimmed but legible) satisfies both "focus" and "presence," letting readers put the highlighted part back into the whole at any moment.

Where it stops holding

Context preservation trades off with focus: graphics with extremely many points (thousands of geographic points) drown every step's emphasis if everything stays fully visible, so partial hiding is necessary—but hidden parts should be recoverable by interaction (click to reveal, an "show all" toggle), never irreversibly gone. Small mobile screens compress available space further; when graphic and text cannot sit side by side, the common compromise pins the graphic at the top with text scrolling below—the context still exists as a persistent graphic. Another boundary is transition duration: too long (over a second) feels sluggish to fast scrollers, too short (under 200 milliseconds) fails to connect old and new states—300-500 milliseconds is the common band.

Applying it

• Default scrollytelling to "weight transfer" rather than "content replacement": current-step elements highlighted, all others visible but dimmed.
• When a major state change is required (e.g., switching years), retain a residue of the previous state (outline or semi-transparent form) for comparison.
• Provide a global progress bar or chapter navigation so readers always know where they are in the narrative and can jump back to earlier steps.
• Verification: scroll a reader to the narrative's middle and ask "what was the comparison baseline in the previous step?"; if they must scroll back to answer, context preservation is insufficient.

Related

• Same group: U9.04.1 Author-driven and reader-driven are two distinct modes · U9.04.2 Hybrid mode needs an explicit switching point
• Nearby: U9.04.2 Hybrid mode needs an explicit switching point · U9.03.1 Annotations point to where readers should look
• Search terms: scrollytelling · stepwise transition · visual context