Introduction

Hey there!

This wiki describes how stories for microscrolly work and how they are built using eodash's custom dashboards.

Layout Overview

To keep the users entertained while they are consuming stories, the scrollytelling engine allows for a range of basic layouts:

Name	Blocks	Properties (Left)	Properties (Right)	Properties (Center)	Description
Full Width Block	4			text	Markdown text block with expansible section (usual scrolling behavior)
Subsection	4			text, image	Scrolls text over media in a dedicated section which scrolls in and out
Sticky Right	1, 3	text	image, iframe, video or scrub		Media on the right, scrolling text on the left
Sticky Left	3, 1	image, iframe, video or scrub	text		Media on the left, scrolling text on the right

---

Now to a more complex example, a Sticky Right layout with a scrubbing video on the right:

[
  {
    "width": 1,
    "text": "I am scrolling text on the left side.",
    "id": "ABC1234567890",
  },
  {
    "width": 3,
    "scrub": "https://example.com/example.mp4",
    "id": "CBA0987654321",
  }
]

Building a full story

As you scroll the text through the viewport, the video plays back. If you reverse the scroll direction, so does the video. As previously mentioned, you can also link to a .json file instead, which defines the length of an image sequence. The engine will then look for JPEG images in the same directory in the format 0001.jpg up to the specified number and render them as a sequence.

If we combine the two previous examples in an array, we get a full story which we can give to the engine! 🎉

[
  [
    {
      "width": 4,
      "text": "I am a full-width text block",
      "id": "ABC1234567890",
    }
  ],
  [
    {
      "width": 1,
      "text": "I am scrolling text on the left side.",
      "id": "ABC1234567890",
    },
    {
      "width": 3,
      "scrub": "https://example.com/example.mp4",
      "id": "CBA0987654321",
    }
  ]
]