Scrollytelling

ArchieML

Firstly, add a graphic. Add a key under asset called steps and make it a nested array of strings. The markup should look something like this:

{.graphic}
  asset: YOUR_FILE.html
  [.steps]
  * Text of first step
  * Text of second step
  []
{}

HTML

Run spectate download. In your asset HTML file, render these steps by using a for loop. Remember that the item variable represents the current block of the [+body] you're in, and that [+body] is a freeform array (i.e. item.value.asset is YOUR_FILE.html, and item.value.steps is the array of step strings you defined in the Google Doc. The loop would look something like this:

<each loop="text in item.value.steps">
  <p>{{{ text }}}</p>
</each>

The corresponding output of PostHTML would be:

<p>Text of first step</p>
<p>Text of second step</p>

If you want your steps to glide over your graphic, you need some extra containers. You need a container around your text, and a container around your graphic. These two containers must be next to each other. Another container should encompass them. The basic structure looks something like this:

<div>
  <div class="graphic-container">
    <!-- YOUR GRAPHIC HERE -->
  </div>
  <div> class="steps-container">
    <each loop="text in item.value.steps">
      <p>{{{ text }}}</p>
    </each>
  </div>
</div>

SCSS

The graphic's container must be position: sticky and top: 0. This container is now sticky! Your steps still appear below the graphic, so if your graphic spans the full page height, and you want your first step to appear in the middle of the graphic and not below the graphic, you probably want a margin-top: -50vh on .steps-container. You probably also want padding-bottom: 80vh on each step. The resulting SCSS becomes:

.graphic-container {
  position: sticky;
  top: 0;
}

.steps-container {
  margin-top: -50vh;
  
  p {
    padding-bottom: 80vh;
  }
}

JS

Lastly, install the Scrollama library, read the documentation, and import it into your JavaScript file. The step selector should be .steps-container p. You'll likely do most of your interactive work in the onStepEnter and onStepExit functions. Don't forget to setup the resize event!