Home icon
Data Visualisation Guide

Scrollytelling: show-and-play

2 minutes read

Scrollytelling

In the Show-and-Play technique a video or animation is started when the user scrolls it into view.

A four panel illustration of how show and play scrollytelling work, with the text 'Scrolling the video... plays it. And pauses it, when the reader scrolls away

Source: Oesch, Jonas, Manuel Roth, and Adina Renner. “Scrolling into the Newsroom: A Vocabulary for Scrollytelling Techniques in Visual Online Articles.” Information Design Journal. Forthcoming 2022

“Preserving biodiversity by protecting forests”, by the World Bank, uses show-and-play to start a video showing the deforestation in Mato Grosso, Brazil. After the video is played once, you can replay it.

Screenshot of satellite images of an area in Brazil showing deforestation. In the top left is a Replay button

Source: SDG Atlas 2020

Hawaii’s Beaches Are Disappearing, by ProPublica, uses graphic sequences and pan and zoom (both with maps as with panoramic photographs), but also uses show-and-play: at certain moments in the story, some beach side real estate is highlighted by showing a video, with the waves hitting the protective walls in front of them.

A screenshot showing a map, a snippet of text and a house close to the sea from Hawaii's Beaches Are Disappearing

Hawaii’s Beaches Are Disappearing

Related pages

Scrollytelling: moviescroller

Scrollytelling: introduction

Annotated chart narrative visualisation

Building scrollytelling articles

Scrollytelling: graphic sequence

Scrollytelling: animated transition

Scrollytelling