Controlling stories with “scrollytelling”

By default, Flourish stories include captions and buttons that let users move forward and back, through the slides. But in some cases, you might want to create a completely different kind of navigation, like a multi-button menu or a “scrollytelling” story, in which the user scrolls down a page to navigate through the story. This can be done with JavaScript by anyone with web development skills.

For an example: Check out this Sky News piece on vaccines and our blog post on how they did it.

How Flourish story URLs work

Below is a story with five slides. When you embed a Flourish story, the embed code creates an iframe pointing at a URL that looks like this:

https://public.flourish.studio/story/22104/embed#slide-0. 

The hash on the end of the URL ( #slide-0) shows the zero-index of the current slide, with "0" being the first slide, :1" the second slide, etc. Changing this hash with code will switch the slide. Here’s a simple interactive example:

https://public.flourish.studio/story/22104/embed#slide-

The code for this example is as follows:

var input = document.querySelector("#my-input");
input.addEventListener("change", function(e) {
	var iframe = document.querySelector("#my-story iframe");
	iframe.src = iframe.src.replace(/#slide-.*/, "") + "#slide-" + e.target.value;
});

How to use Flourish stories for scrollytelling

There are different ways to convert normal Flourish stories into scrollytelling stories, but the basic idea is that you need to create a scroll event or intersection observer on your page that looks for certain “triggers” (e.g. text blocks) that then change the slide (i.e. hash) in the Flourish story when they reach the the middle of the screen. Various libraries make this easy to do, but we recommend Scrollama.