ScrollyTelling of the day: The road was long A voice from Ukraine

How “The road was long” Uses Scrollytelling to Humanize a Crisis

In the world of digital storytelling, few formats are as powerful as scrollytelling for creating immersive, emotionally resonant experiences. It’s a medium that, when executed well, guides a reader through a narrative, blending text, visuals, and interaction into a single, seamless flow. A masterful example of this is the Internal Displacement Monitoring Centre’s (IDMC) piece, “The road was long: A voice from Ukraine.”

This story follows Kristina, a woman displaced from Kharkiv, as she recounts her harrowing journey to safety. It eschews raw news footage for a beautifully illustrated graphic novel style, a decision that proves to be its greatest strength. Let’s break down exactly what makes this scrollytelling experience so effective and what lessons other creators can learn from it.

1. Visual Storytelling Techniques: Emotion Through Illustration

The most striking aspect of this piece is its visual language. It’s a masterclass in using design to support and amplify a narrative.

How the Visual Design Supports the Narrative:
The choice to use a graphic novel aesthetic is brilliant. It achieves several goals simultaneously:
- Humanization: The illustrated characters feel personal and relatable, transforming an overwhelming news story into an intimate, human-scale testimony.
- Emotional Accessibility: The style is serious and somber, with a muted color palette dominated by blues and greys that perfectly captures the anxiety and uncertainty of the situation. However, it avoids the potentially re-traumatizing effect of real-life photos or videos, making the difficult subject matter more approachable for a wider audience.
- Focus: By illustrating key moments—packing an emergency bag, seeing the first explosions, the crowded subway—the creators direct the reader’s attention to the most emotionally significant parts of the narrative.
Data Visualization Techniques:
While the story is primarily qualitative, it includes a simple yet incredibly effective piece of data visualization. As Kristina describes the long bus journey, an animated map of Ukraine appears. As the user scrolls, a line is drawn across the country, tracing the route from Kharkiv in the east, through Kyiv and Ternopil, to Lviv in the west. This isn’t a complex chart, but it contextualizes the personal journey in physical space, making the title “The road was long” a tangible, measurable reality for the reader. The hand-drawn style of the map integrates perfectly with the overall artistic direction.
How Animations and Transitions Enhance Understanding:
The animations are subtle but purposeful.
- Opening Reveal: The story begins with a blurred illustration that sharpens into focus as the page loads. This classic technique acts as a gentle invitation, drawing the user into the story as if a memory is coming into view.
- Parallax and Panning: The creators use parallax scrolling masterfully. As you scroll, the background illustrations pan slowly, creating a sense of depth and a cinematic feel. For example, the scene of packing emergency supplies pans down to reveal the passport, money, and first-aid kit, visually reinforcing the text without needing a separate image.
- Subtle Environmental Details: When Kristina mentions helicopters, they fade into the sky above the bus, adding a layer of menace to the scene that is directly tied to the narration. The transitions between major scenes are smooth crossfades, which maintain the story’s dreamlike, memory-like quality.

2. Interaction Patterns: The Reader as the Page-Turner

The interaction in “The road was long” is elegant in its simplicity. The user’s primary action—scrolling—is what drives the entire narrative forward.

Scroll-Triggered Interactions:
The core of the experience is built on the classic “sticky background” pattern. An illustration locks into place on the screen while text boxes fade in and out over it as the user scrolls. This allows a single, powerful image (like the view of the explosion from the window) to serve as the backdrop for several paragraphs of text, letting the reader absorb the visual context while they read.
How User Interaction Advances the Story:
The user is in complete control of the pacing. By scrolling, they are effectively “turning the page” of this digital graphic novel. This simple agency is crucial; it allows the reader to pause and reflect on a particularly heavy statement or to move through the story at a comfortable speed. This prevents the experience from becoming overwhelming and keeps the reader engaged.
Innovative Interaction Techniques:
While the piece doesn’t invent new interaction patterns, its innovation lies in the flawless execution and synthesis of existing ones. The seamless blend of parallax panning, scroll-triggered text, and integrated animated elements (like the map) creates an experience that feels more polished and cohesive than most. The true innovation is the application of this high-fidelity, artistic approach to a humanitarian subject.

3. Content Structure & Flow: A Journey in Three Acts

The narrative is structured like a classic story, with a clear beginning, middle, and end, which makes the complex situation easy to follow.

Narrative Structure:
1. The Before: We are introduced to Kristina and her life, establishing a baseline of normalcy that is about to be shattered. The sense of foreboding is built with mentions of emergency backpacks and evacuation plans.
2. The Event: The narrative pivots on the chillingly simple chapter heading: “We are being bombed.” This marks the shift from anxiety to crisis.
3. The Journey: This middle section covers the escape, the chaos of the subway, and the long, uncertain bus ride. This is where the animated map provides crucial context.
4. The After: The story concludes not with a simple “happily ever after,” but with the complex reality of life as a displaced person—safer, but not safe. She is still surrounded by the war, helping others, and facing an unknown future.
Pacing of Information Revelation:
The text is delivered in short, highly readable paragraphs. This is essential. It breaks a large amount of testimony into digestible chunks, giving each beat of the story room to breathe. The visual-heavy, text-light approach respects the reader’s attention and allows the emotional weight of the illustrations to do much of the work.
How the Content Builds Towards Conclusions:
The story masterfully zooms from the micro to the macro. It begins with one deeply personal account, drawing the reader in through empathy. It ends by pulling back to a concluding statement from IDMC about the broader crisis of internal displacement. This structure effectively uses Kristina’s story as an emotional anchor to connect the reader to the organization’s wider mission.

4. Technical Implementation: The Power of a Platform

The technical side of this story is smooth and efficient, prioritizing the user experience above all else.

Technologies Used: The footer reveals the site was “Built with Shorthand”. Shorthand is a popular digital storytelling platform designed specifically for creating these kinds of immersive articles. This means the creators could focus on the narrative and art direction, while the platform handled the complex JavaScript for scroll-triggering, animations, and responsive layouts.
Performance Optimization: The experience is remarkably smooth, with no noticeable lag or jank during scrolling. This is likely due to platform-level optimizations like lazy-loading images (loading them only as they approach the viewport) and efficient handling of CSS and JavaScript.
Notable Technical Approaches: The most notable approach is the decision to use a dedicated scrollytelling platform. It demonstrates that you don’t need a team of elite front-end developers to create a world-class narrative experience. Tools like Shorthand democratize the creation of high-impact visual stories.

5. Effectiveness & Impact: Lessons for Every Creator

So, why does this piece work so well, and what can we learn from it?

What Makes it Effective?
Its effectiveness comes from its profound empathy. By filtering a global crisis through the eyes of one person, it makes the incomprehensible feel personal. The artistic direction is the perfect vehicle for this—it’s emotional, dignified, and respectful. The seamless interaction design ensures that the technology never gets in the way of the story.
How Well Does it Achieve its Goals?
As a piece of communication for the IDMC, it is a stunning success. Its goal is to build awareness and understanding of the plight of internally displaced persons. “The road was long” does this far more effectively than a fact sheet or a standard news article ever could. It creates a lasting emotional connection between the reader and the issue.
What Other Creators Can Learn:
1. Lead with Humanity: Find the personal story that illuminates the larger data set or issue. People connect with people, not statistics.
2. Style is Substance: Your visual approach is not decoration; it’s a core part of the narrative. Choose a style that enhances the story’s tone and message.
3. Pace is Everything: Give your story room to breathe. Use short text blocks and powerful visuals to let your message sink in. Control the flow.
4. Integrate, Don’t Isolate: Ensure your data visualizations and animations are woven directly into the narrative fabric, like the journey map in this example.
5. Focus on the Story, Not the Code: Leverage modern platforms to execute your vision without getting bogged down in technical complexities.

“The road was long” is more than just a website; it’s a powerful digital document that stands as a testament to the resilience of the human spirit and the power of storytelling to foster empathy in a disconnected world.

Technical Analysis at a Glance

For those interested in the specific technical and structural details of the project:

Source URL: https://story.internal-displacement.org/the-road-was-long-a-voice-from-ukraine/index.html
Identified Scrollytelling Techniques: scroll-triggered, reveal, fade, parallax, sticky, transition, animation
Primary Technical Methods: fade, scroll_triggered_animation, viewport_triggered
Visual Component Analysis:
- Total Animations: 7
- Total Visual Effects: 26