Lab 13: Scrollytelling with the Scrolly Story Generator

Scrollytelling is a form of interactive storytelling that pairs text with media. As you scroll through the narrative, the media automatically transforms. Media might include video, images, and clickable maps. This is a storytelling technique often used in journalism as a way to distill complex topics into easily digestible and engaging stories.

These can be really complex! Here are some fancy examples of scrollytelling that highlight how interactive scrolling can engage the reader.

• Every Last Drop
• One Pixel Moon
• Detroit Segregation Wall

But they don’t have to be complicated to be effective. The key to good scrollytelling is to think about how your text and media enhance one another. The media isn’t just illustrating the text – it’s adding meaning that the text can’t convey effectively or completely on its own.

Here’s an example using the tool we’ll be working with today: How to Cross a River

Lab Overview

For this lab, we’ll collectively build a scrolly story about the Mississippi River. Each group member will contribute at least two to three slides, including text and a functional piece of media.

You can frame your slides in any way you choose. Feeling stuck? You might consider…

• The history of the river — check out the Wikipedia article or local storytelling sites like “Unseen St. Louis” to see what significant events or curious anecdotes have taken place along the river.
• Crossing the river — do you hate the Poplar Street Bridge? Are you charmed by the Old Chain of Rocks Bridge? What’s the best/easiest/least frustrating way to get across it?
• Experiences of the river — What personal or sensory experiences of the river do you have? Have you fished in it? Kayaked on it? Smelled it?
• Depictions of the river — Where does it show up in popular culture? How do people talk about the Mississippi, here or elsewhere?

Technical Details

Each row in the spreadsheet is one step, and each step is a combination of one block of text and one piece of media. There are three types of step you can choose from, depending on your media type: map, image, and video, which all pair a text box with a media box, and text, which is just text that stretches across the whole page. Select your media in the ContentType column (Column A). For the next few columns, there are some small differences in the information you need depending on step type.

For maps:

• In Column H, ZoomLevel, choose how far in you want to zoom on the map. Zoom levels range from 0 to 18, and the higher the number, the more zoomed in you’ll be. For maps, a zoom level of 4 or 5 will show a whole region of the country. A zoom level of 13 or 14 will show detail at the level of streets and buildings. You can set the zoom level for each step, so think carefully about what you’re trying to demonstrate and where you want your reader’s attention! At the bottom of this page, there’s a map where you can zoom in to the frame you want and see what the zoom level is.​

For images

• To use images, you’ll need to link to them from somewhere. If you have access to the GitHub repository for your story, you can upload it there. That ensures that you have a stable link that won’t break. Otherwise, check with your instructor for the best place to upload it.
• In Column B, FilePath, paste the File URL for your image.
• In Column C, AltText, describe your image and what purpose it’s serving in your narrative.
• In Column D, ImageOrientation (optional), put vertical or horizontal, depending on the orientation of your image.
• Skip Columns E and F, Latitude and Longitude.
• In Column H, ZoomLevel, choose how far in you want to zoom on the image. Images don’t need as high a zoom level as maps, and your image will get grainy if you zoom in too far. Choose a zoom level of 1 if you just want it to display as is.
• The built-in zoom goes toward the center of the image. If you want to zoom in on a different area or pan between sections of the image, your best bet is to crop the image yourself and add the different areas of the image in as individual steps.
• Your images will take up a big chunk of the screen, so make sure you’ve got a relatively high-resolution image — ideally not less than 1200 px in either direction. Not sure how big your image is? If you’ve got it saved to your computer, right click and select Properties and go to the Details tab.

For videos

• You can upload videos to your GitHub repository, but in some cases the file sizes might get too big. You can also use links from YouTube or Vimeo. If you do, you’ll need to copy the link out of the embed code. Click on Share > Embed, and then copy the URL in the code.

• In Column B, FilePath, paste the URL for your video.
• In Column C, AltText, describe your video and what purpose it’s serving in your narrative.
• Skip Columns D, E, F, and H, ImageOrientation, Latitude, Longitude, and ZoomLevel.

Adding and customizing text

Columns G and I, TextHorizontalPercentage and Text, are the same for all media types. This is where you’ll add your narrative content to your story. You have three options here:

• You can add text to an existing piece of content, in which case the text will appear to the left of the media. If you go this route, try to keep your text under about 100 words per step.
• You can add text as a standalone box with no media, in which case your text will stretch across the whole width of the page. To do this, select “Text” as your content type and leave columns B through F blank. You can have longer chunks of text in this format. (This is a good way to include your references!) This step type gives you a block of text with no background color or dynamic elements.
• You can also set your step type to a media step but change the TextHorizontalPercentage to 100%. This will also give you a text-only step, but it’ll still have the same background color as all your other steps, and it will dynamically widen and narrow as you scroll.

In all cases, you can format your text using HTML. Here are a few essentials.

• Since you’re entering your text into a spreadsheet, you won’t be able to use the Enter key to separate your paragraphs. But no one wants to read a wall of text! In order to break your text, use two linebreak tags between your paragraphs: <br><br> ​
• You might want to format your text. Some handy formatting tags include <b>bold</b>, <i>italics</i>, and <u>underline</u>.​
• You can also include links in your text: <a href=“www.example-url.com”>The text you want to show up on the page goes here</a>​. This is one way to add references as you go!
• If you want to do more with HTML, check out this list of basic tags.
• You can use this HTML editor to format your text and generate the correct HTML. Format your content using the editor on the left side, and you’ll see your HTML appear on the right side. Before you copy it over, press the “Compress HTML” button at the bottom of the HTML window.

5. Finalize your story

Now that you’ve got the story content finished, it’s time to add some finishing touches and edit your content. First, go to the Story tab in your spreadsheet.

• Ignore Column A, ScrollType.
• Fill out Columns B and C, Title and Subtitle.
• Column D, EndText, is what appears at the end of your scrolly story.
• Column E, TextHorizontalPercentage, lets you change how wide the text box is compared to the media box in your story. By default, it’s set to 33%, or 1/3 of the width of your screen. If you’ve got a lot of text-heavy steps, you might want to increase that to give yourself a little more room. I recommend staying under 50%.
• In Column F, Authors, put the author name(s).

Finally, go to your story’s link and read through it carefully.

• Proofread for any errors in your text.
• Make sure all your sources are cited.
• Take a close look at your media items: Are they displaying properly? Do they make sense? Are they high enough resolution?