Visual storytelling and scrollytelling

Visual storytelling tells with pictures and their order. Scrollytelling turns scrolling into time: the lower the reader goes, the further along the story is.

You can tell a story without words

So far we have talked about text. But on a site, stories are also told by pictures and by the order of display. Visual storytelling is the set of moves by which an image and a composition do what words usually do.

• Sequence. Three photos, “before, process, after”, are already a story. Order decides.
• Close-up and detail. One exact detail (the craftsperson’s hand, a drawing with marks on it) says more than a wide general shot.
• The caption is the narrator. Captions are read readily, so the key point can go in one: what is in the picture and why it matters.
• Don’t show what isn’t there. A stock picture of a handshake says nothing about you or your client.

And two reservations. A picture needs a text alternative (the alt attribute): it is for those who can’t see the picture. And, as in the lesson on data, don’t pass staging off as documentation: a photo of employees captioned “our clients” is deception.

Check yourself: what makes three photos a story?

The order: “before, process, after”. It turns a set of shots into a chain of events.

Scrolling as time

A page is not a film: it has no time. But it has scrolling, and scrolling can become time: the lower the reader has gone, the further they have come in the story. The technique is called scrollytelling (from scroll and storytelling). A famous early example is “Snow Fall”, a 2012 feature in The New York Times about an avalanche, where text, photos and video gave way to one another as you scrolled. Newsrooms such as The Pudding have since made it a craft of its own.

There are three levels.

1. Just scenes. A section is a scene, and scrolling moves from one to the next. This is an ordinary page, and the approach suits everyone.
2. Reveal on scroll. Elements appear when the reader reaches them. This is what we will build.
3. A pinned scene. A picture or chart stays in place and changes step by step while the text scrolls past. For this people usually take a library (for example Scrollama, the link is in the sources) or CSS.

Scroll the block in the diagram below and notice the switch: it imitates the “reduce motion” setting.

Imitate “reduce motion” Start over

1. 1. You tell us about your situation

   A call or a request: a couple of minutes.

2. 2. We name a time and a price

   Before the work starts, in writing.

3. 3. The work goes step by step

   You know what stage the matter is at.

4. 4. You get the result

   And a clear next step.

Scroll the box: each step appears when it is almost fully in view.

Scrolling with CSS (animation-timeline): checking….

Check yourself: how does “reveal on scroll” differ from an ordinary page?

The content is the same, and the delivery differs: elements arrive when the reader reaches them. Without the animation the page stays complete.

Scrolling in CSS

It used to be that a reveal on scroll was written in JavaScript. Now, for simple cases, there is CSS. Two features: the animation-timeline property, which ties an animation to scrolling, and the view() function, which says “watch how the element enters the viewport”.

@keyframes reveal {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  .step {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
}

Let’s take it apart. @keyframes reveal describes “from transparent and shifted to visible”. The rule with animation-timeline sits inside @supports because not every browser can do this kind of scrolling: those that can’t will skip the rule, and the steps will stay an ordinary list. The animation-range sets over which stretch of scrolling the animation runs. And the last rule turns the animation off for people who asked their system to reduce motion.

Support changes from version to version, so check the current data in the MDN reference before relying on it. The diagram above tells you whether your browser can do it. An important principle: animation is an extra, not a condition. The base page has to work everywhere.

Check yourself: why does the rule with animation-timeline sit inside @supports?

So that browsers without support skip it and show an ordinary list. The animation is only an extra.

Good manners

• Don’t hijack scrolling. Don’t change its speed or direction, and don’t grab the mouse wheel: the person must be in charge of the page.
• Respect “reduce motion”. For people with vestibular disorders, animation on a page can cause dizziness and nausea. The WCAG guidelines address this: success criterion 2.3.3 (Level AAA) says motion triggered by interaction can be turned off, and criterion 2.2.2 (Level A) says anything that moves on its own for more than five seconds needs a way to pause or stop it. In the US the ADA is often applied to websites through these guidelines, and in the EU the European Accessibility Act builds on the same standard.
• Animate only what is cheap: opacity and offset (opacity, transform). Animating sizes makes the browser recompute the layout, and the page judders.
• The content is accessible without the animation: it reads, works from the keyboard and in a screen reader.
• The animation serves the story, and doesn’t decorate it. If a step can be shown without motion, let it be so.

Practice

Make a “How it works” block from your client’s journey.

1. Three to five steps as a list: from the first contact to the result. The last step leads to the label of your button (write it word for word).
2. Animation on scroll: @keyframes, and a rule with animation-timeline: view() inside @supports (animation-timeline: view()).
3. The fallback: @media (prefers-reduced-motion: reduce) and animation: none.
4. Switch the animation off in your head: the page should read as a simple list. If it does, you have done it right.

When you don’t need scrollytelling

A short page, a form, a price list or a legal text doesn’t need animation. It is justified when the journey is long and you need to show how the steps follow one another. In other cases good layout and exact text are better.