---
tags: scroll-lab
---

# Scrollytelling 'Lookbook'
here we review the different platforms we could use to create scrollytelling projects

## canva
experimenter: Carly
description:
cost/barriers: requires an account, but can be accessed via harvard
benefits: easy to learn the interface; allows for integration of multiple different kinds of media (sound, video, gifs, animations, etc.)
limitations: some more interactive elements not possible
examples:

## ArcGIS Storymaps
experimenter: Celia

Celia used ArcGIS to build a storymap of Somerville's emergency preparedness plan. Can make an [ArcGIS account as a Harvard student](https://harvard-cga.maps.arcgis.com/).[Instructions are here](https://cga-download.hmdc.harvard.edu/publish_web/Software_downloads/Installation_Instructions/How_Access_Esri_Services_Using_HarvardKey.pdf).
Also made a map! And was able to do this pretty quickly (30 minutes) - not clear whether you have to start with a map but that's how Celia got to the storymap app within GIS.

example: https://storymaps.arcgis.com/stories/4586c60dc91744cbae9967442f990468

## JavaScript or other coding platforms/libraries?
experimenter: Anna will do her best...
example libraries: https://pudding.cool/process/how-to-implement-scrollytelling/
React, MDX

initial update: tried using a combination of things based on [this](https://varun.ca/scrollytelling/) and it wasn't easy at all, though I am also new to many of the tools involved. That said, I think it would be pretty doable to do something like what Marlon suggested:
"I think that what one might want to create is a markup language (like an extension of markdown) that converts to this style of scrollytelling---which is not that complex, really:
define sections (= scrollRange)
define animation to play across scrollRange
and that's it? or can you see more going on in some of these?"
My brain is a bit fried this week so working with Next.js & React & MDX ended up being messy, but I already was able to get the sort of thing where images scroll over a page when certain content appears (content delineated by h2s or other headers), so I think someone with a better mind for this stuff could do it really quickly, and I could maybe even get there. From there, it would be easy to have a student just edit the initial part, since wed have the markup language to convert already.
My big question there is about annotation but I think using MDX could get us to some of that as well with different ways of marking text.

## Cargo Collective
https://cargo.site/https://cargo.site/

experimenter: Elitza

[this one](https://cargo.site/Templates#postdust) is cool

20220923: Elitza made a scrollytelling prototype in cargo collective! One drawback was that this platform doesn't let you share so Carly suggested doing a screen recording of it as one workaround

## Shorthand
Apparently, this is what BBC/NYT/WashingtonPost other big media platforms use. You can only publish 3 stories for free but I think it could be worth trying? https://shorthand.com/

Anna: I gave it a look, and I think it can do some really cool things! That said, it's kind of ...a lot? I think it could end up making the best of the best, but it would take a lot of working to get there, and the platform allows for so much that one could easily get somewhere else...

## Northwestern KnightLab: https://knightlab.northwestern.edu/projects/

experimenter: Yue(Timeline, StoryMap)

Website Examples:
CAMLab, Harvard: https://camlab.fas.harvard.edu/

20220923: Yue had the awesome idea to maybe integrate a timeline into a scrollytelling story. Celia asked if it's possible that KnightLab's timeline is a plug-in (and could be integrated with something like ArcGIS).