Components / Artwork & collections

Scroll-Story

Keep narrative and media coordinated while preserving native page scrolling.

Basic structure

div.scroll-story[data-scroll-story] > div.story-steps > article.story-step

Why changing height="800" may not resize an image

The HTML width and height attributes describe the source asset and help the browser reserve space before it loads. They are not fixed display dimensions when CSS overrides them.

Figure uses width: 100%; height: auto on its media. Once the image is loaded, its natural proportions determine the displayed height at that width. A crop class such as is-square or is-4by3 deliberately chooses a different displayed ratio.

Scale the whole image: change Figure width. Height follows proportionally.
Choose a different shape: change the crop ratio. The media cover-crops rather than stretches.
Match adjacent content: use is-fill in a layout that supplies height.
Need an exact display height? set CSS height on the image, not its HTML height attribute.

<figure class="figure story-portrait">
  <img src="portrait.webp" width="800" height="500" alt="…">
</figure>

/* Your site CSS. story-portrait is your own class, not an Artist modifier. */
.figure.story-portrait > img {
  height: 800px;
  object-fit: cover;
}
@media (max-width: 800px) {
  .figure.story-portrait > img { height: auto; }
}

Use the asset’s real dimensions in the HTML. Scroll-Story copies the authored Figure classes and attributes into its visual display; its private sticky-position measurements are generated by JavaScript and are not sizing controls.

Try it Scroll mode Images on the right Figure to change Figure width Crop

Choose one Figure or all of them, then change width or crop. These control displayed size; changing an HTML height attribute alone does not override height: auto. Scroll to try the transitions. Private sticky measurements are generated by JavaScript.

1 / 3

Discover

Native scrolling keeps this explanation paired with its media. Figure width and crop are ordinary author choices.

2 / 3

Explore

Native scrolling keeps this explanation paired with its media. Figure width and crop are ordinary author choices.

Understand: the caption belongs to this Figure.

3 / 3

Understand

Native scrolling keeps this explanation paired with its media. Figure width and crop are ordinary author choices.

HTML

<div class="scroll-story" data-scroll-story><div class="story-steps"><article class="story-step"><figure class="figure is-rounded"><img src="/assets/images/pattern-example.svg" width="800" height="500" alt="Discover — illustrative landscape"><figcaption>Discover: the caption belongs to this Figure.</figcaption></figure><div class="content"><p class="eyebrow">1 / 3</p><h3>Discover</h3><p>Native scrolling keeps this explanation paired with its media. Figure width and crop are ordinary author choices.</p></div></article><article class="story-step"><figure class="figure is-rounded"><img src="/assets/images/artist-detail.svg" width="800" height="500" alt="Explore — illustrative landscape"><figcaption>Explore: the caption belongs to this Figure.</figcaption></figure><div class="content"><p class="eyebrow">2 / 3</p><h3>Explore</h3><p>Native scrolling keeps this explanation paired with its media. Figure width and crop are ordinary author choices.</p></div></article><article class="story-step"><figure class="figure is-rounded"><img src="/assets/images/composition-placeholder.svg" width="800" height="500" alt="Understand — illustrative landscape"><figcaption>Understand: the caption belongs to this Figure.</figcaption></figure><div class="content"><p class="eyebrow">3 / 3</p><h3>Understand</h3><p>Native scrolling keeps this explanation paired with its media. Figure width and crop are ordinary author choices.</p></div></article></div></div>

Options

Class or attribute	What it does
`default`	Sticky image; text scrolls.
`is-images-scroll`	Sticky text; images scroll.
`is-reversed`	Images on the right in either mode.
`mobile / reduced motion`	Original Figure-first sequence stays readable.