What is Scrollytelling? #

Scrollytelling is a storytelling technique that combines text, visuals, and interactive elements in a scrolling format to create an immersive narrative experience. As users scroll down a page, content unfolds in a dynamic way—revealing images, animations, charts, and text that work together to tell a story. It’s often used for data-driven stories, timelines, or complex topics that benefit from a guided, visual journey.

Defining Your Scrollytelling Project #

• Identify the Purpose: What story do you want to tell? What is the main goal of your scrollytelling experience?
  Common uses include:
  • Data Story: Present statistics or survey results in a compelling narrative.
  • Explainer: Break down a complex concept into digestible sections.
  • Timeline: Showcase events or milestones in chronological order.
  • Journey or Process: Walk the audience through steps or stages interactively.
  • Comparison: Contrast options or scenarios with visuals and text.
• Know Your Audience: Who will be engaging with this content? Tailor tone, visuals, and interactivity to their needs.
• Research and Content Gathering: What data, images, and insights will you need? Ensure accuracy and relevance.

Scrollytelling Content #

• Title and Intro: What is a clear, engaging headline and opening that sets the stage for your story?
• Narrative Flow: How will you break the story into sections that reveal progressively as the user scrolls?
• Visuals and Media: What images, videos, charts, or animations will enhance the story?
  Consider sourcing from free media resources or internal libraries.
• Text: Keep text concise and impactful. Use short paragraphs or bullet points for clarity.
• Citation and Attribution: Where will you credit sources for data and media?

Designing Your Scrollytelling Experience #

• Layout and Orientation: Will it be vertical scrolling (most common) or horizontal?
• Interactivity: How will elements animate or change as the user scrolls? (e.g., fade-ins, parallax effects)
• Visual Hierarchy: Use size, color, and motion to guide attention to key points.
• Consistency: Maintain a cohesive style for fonts, colors, and transitions.
• Accessibility:
  • Are fonts readable and colors accessible for low-vision and color blind users?
  • Do you use heading structure to help someone navigate the sections of your site?
  • Include alt text for images
  • Consider providing a static version or transcript for users who cannot interact with the scrolling experience.
  • This guide on how to create Accessible Infographics and Data Visualizations has helpful things to think about. The DKC’s guide on Accessible Visual Design also has links to tools that can help you check accessibility. Consider how you might provide alternative means for accessing your infographic.

Selecting a Tool #

What tools will you use to build your scrollytelling project?: Many tools like Canva can aid in creating a scrollytelling website by providing templates, assets, and easy to use data visualization elements you can use. Additionally, consider any accessibility elements and if the tool you are using has the features you need.

UMW also has website building platforms, Domain of One’s Own and Sites@UMW, where you could build a scrollytelling experience as well.

Created by Shannon Hauser 11/17/2025