Interactive Components for Visual Storytelling
Parallax and Scrollytelling
Parallax and scrollytelling turn scrolling into a guided narrative. A graphic stays pinned in view while short blocks of text move past it, and the graphic updates to match whatever the reader is reading. It works well when a report tells a sequential story, such as a participant’s path through a program, the stages of an evaluation, or a change over time. Use it to walk a reader through one idea at a time.
Scroll the example below. The journey panel on the left stays in place while each stage is explained on the right, and the active stage lights up as you go.
The Evaluation Journey
Listen to the community
Every evaluation starts with the people closest to the work. We gather what partners and participants already know through interviews, focus groups, and listening sessions, so the questions we measure are the ones that matter to them.
Measure what matters
Next we translate those priorities into a focused set of measures. We collect only the data needed to answer the shared questions, and we watch for gaps that could leave some groups out of the story.
Turn findings into action
Findings are only useful if a partner can act on them. We close the loop with clear recommendations, name the limits of what the data can say, and hand back a story the community can carry forward.
- Use it for a genuine sequence. Parallax earns its place when the order of the steps is the point. If the content is a set of parallel items, a stat card grid or tabset is clearer.
- One idea per step. Keep each block short. The reader is scrolling, not studying.
- Keep the story readable without the motion. The example degrades to a simple stacked layout on small screens and when a reader has reduced-motion settings turned on, so the content still reads top to bottom.
- Do not overuse it. One scrollytelling sequence per report is usually enough. Too much pinned motion is disorienting and slows the reader down.