Controlling stories with “scrollytelling” and other custom navigation

Flourish stories come with captions and buttons to move to the next or previous slide, but in some cases you might want to create a completely different kind of navigation, such as a multi-button menu or a “scrollytelling” story, in which the user scrolls down a page to navigate through an embedded Flourish story (like this Sky News example, which is covered on our blog here). This can be done with JavaScript by anyone with web development skills.

How does it work?

Below is an embedded story with five slides. The embed code creates an iframe pointing out at url that looks like this: https://public.flourish.studio/story/22104/embed#slide-0. As you can see, at the end of that url is a hash #slide-0. The number indicates the current slide (0 being the first slide, 1 the second slide, etc) and 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 do I use this approach to create scrollytelling stories?

There are different ways to create a “scrollytelling” piece. In essence, you need a scroll event or intersection observer on your page that looks for certain “triggers” (e.g. text blocks) that change the slide in the Flourish story when they reach the the middle of the screen. Various libraries make this easy to do. We recommend Scrollama.