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:
The code for this example is as follows:
var input = document.querySelector("#my-input");
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.