But they don\u2019t 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\u2019t just illustrating the text \u2013 it’s adding meaning that the text can\u2019t convey effectively or completely on its own.<\/p>\n\n\n\n
This tutorial comes from the IRIS Center at SIUE and was written by Dr. Meg Smith. For the most up-to-date instructions, see the IRIS Center’s website or the GitHub repository. <\/p>\n\n\n\n
Making a scrollytelling story<\/h2>\n\n\n\n
We’re using the Scrolly Story Generator, developed by Dan Schreiber for the IRIS Center. You’ll add content to your scrolly story using a Google Sheet. Your story will be broken into steps<\/strong>, and each step will include some text and a single piece of media. (Want to know more about setting up the scrolly story? Check out the GitHub page<\/a>, where the code and documentation are stored. )<\/p>\n\n\n\n As you follow along, you can look at the links for the example spreadsheet<\/a> and the example scrolly story<\/a>. <\/p>\n\n\n\n Before you even start adding to the sheet, take some time to storyboard. What are the key pieces of media you want to highlight? Where does it make sense to break up your text? There’s some flexibility built into the tool (which we’ll talk about below), but a good rule is to try to keep your text under 100 words per step. (Less is fine!) This is a good opportunity to gather all your references in one place too.<\/p>\n\n\n\n Remember that your media items should be things you have permission to use: public domain, Creative Commons, or your own work. Check out this list of resources for free-to-use media<\/a>.<\/p>\n\n\n\n Once you’ve got a good outline, head over to your Google Sheet. Each group has been given a link to their specific sheet. You can follow along with this example spreadsheet<\/a>.<\/p>\n\n\n\n In the sheet, you’ll find two tabs: Story<\/strong> and Steps<\/strong>. Click over to Steps<\/strong>. (We’ll come back to Story later.)<\/p>\n<\/div>\n<\/div>\n\n\n\n Each row in the spreadsheet is one step<\/strong>, 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<\/strong>, image<\/strong>, and video<\/strong>, which all pair a text box with a media box, and text<\/strong>, which is just text that stretches across the whole page. Select your media in the ContentType<\/em> column (Column A). For the next few columns, there are some small differences in the information you need depending on step type.<\/p>\n\n\n\n Column G, Text<\/em>, is the same for all media types. This is where you’ll add your narrative content to your story. You have two options here: <\/p>\n\n\n\n In both cases, you can format your text using HTML<\/strong>. Here are a few essentials.<\/p>\n\n\n\n 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<\/strong> tab in your spreadsheet. <\/p>\n\n\n\n1. Storyboard<\/h3>\n\n\n\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-1-1024x731.jpg\")
<\/figure>\n<\/div>\n\n\n\n2. Find your Google Sheet<\/h3>\n\n\n\n
3. Add steps<\/h3>\n\n\n\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-4-1024x418.jpg\")
<\/figure>\n\n\n\nFor maps<\/strong>: <\/h4>\n\n\n\n
\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-9.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/file-url-wp-1024x455.jpg\")
<\/figure>\n<\/div>\n\n\n\nFor images<\/strong>:<\/h4>\n\n\n\n
\n
For videos<\/strong>: <\/h4>\n\n\n\n
\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-2-1024x697.jpg\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-3.jpg\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n\n
4. Adding text<\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-5.jpg\")
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-6.jpg\")
\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Compress-HTML-button-This-removes-line-breaks-that-will-mess-up-your-spreadsheet-1024x478.png\")
<\/figure>\n\n\n\n5. Finalizing your story<\/h3>\n\n\n\n
![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scrolly-tutorial-7.jpg\")
<\/figure>\n<\/div>\n\n\n\n![\"\"](\"https:\/\/iris.siue.edu\/wp-content\/uploads\/2025\/02\/Scolly-tutorial-8-1024x411.jpg\")
<\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"