GTIF Scrollytelling creation
Scrolly stories can be created by using the custom dashboard ability of the GTIF client. This ability is not enabled for all users per default. In order to allow adding a new components into the custom dashboard it is necessary to access the client through
https://gtif.esa.int/explore?customDashboard=true
When selecting a dataset in this explore mode a new button will appear on the bottom right of the map:
By clicking this button a new item will be added to the dashboard. Once an item was added (or a previous custon dashboard was created) you can then navigate to it by clicking on the “custom dashboard” button on the top right of the client:
Inside the custom dashboard further story editing can be done, see editing section below. It is also possible to access the dashboards directly for editing with the appropriate link. When you click on “save dashboard” button, after filling the required info you will be shown an edit and a preview link. This information will also be sent to the provided email. Only share the edit code with trusted collaborators.
You can use the id of the custom dashboard to see how it would be visualized as scrollystory by using following url:
https://gtif.esa.int/scrolly?id=<id_number>
This way you can see how your editing will modify the scrollystory.
The scrollystory uses the custom dashboard rows as logical steps, depending how they are structured they will be rendered differently when showing them as scrollystory. A row has a width of 4 blocks, each component can be reduced to have the size of 1, so in principle 4 components can fit in a row.
Following layouts are possible
| Name | Blocks | Properties (Left) | Properties (Right) | Properties (Center) | Description |
|---|---|---|---|---|---|
| Full Width text | 4 | text | Text scrolling in the center without background | ||
| Full width image | 4 | image | Image scrolling in the center (no text) | ||
| Video Scrubbing (full-width) | 4 | scrub | Video positioned in the center, scrolling position determines position in video or sequence | ||
| Sticky Right | 1, 3 | text | Image, iframe, video, scrub, map, component | Media on the right, scrolling text on the left | |
| Sticky Left | 3, 1 | Image, iframe, video, scrub, map, component | text | Media on the left, scrolling text on the right | |
| Scrolly Map | Multiple 1,3 | text | map | Special case of the 1,3, when multiple text map rows are created it defines logical steps for a full screen map. | |
| Full screen sticky media | 2,2 | text | Image, video, scrub | Full screen media with text scrolling on the left side | |
| Full screen sticky media | 2,2 | Image, video, scrub | text | Full screen media with text scrolling on the right side |
text Text scrolling in the center without background Full width image 4
image Image scrolling in the center (no text) Video Scrubbing (full-width) 4
scrub Video positioned in the center, scrolling position determines position in video or sequence Sticky Right 1, 3 text Image, iframe, video, scrub, map component
Media on the right, scrolling text on the left Sticky Left 3, 1 Image, iframe, video, scrub, map component text
Media on the left, scrolling text on the right Scrolly Map Multiple 1,3 text map
Special case of the 1,3, when multiple text map rows are created it defines logical steps for a full screen map. See further information of scrolly map below. Full screen sticky media 2,2 text Image, video, scrub
Full screen media with text scrolling on the left side Full screen sticky media 2,2 Image, video, scrub text
Full screen media with text scrolling on the right side
For showing a video component a new text block has to be added (with any title) but with following body content:
- <--AUTOPLAY-->https://eox-gtif-public.s3.eu-central-1.amazonaws.com/videos/GHGemissions_221007_final_sped_up.mp4<--AUTOPLAY-->
- <--SCRUB-->https://eox-gtif-public.s3.eu-central-1.amazonaws.com/videos/GTIF_Renewable_share_221007.mp4<--SCRUB-->
Autoplay is used for showing videos that start and play normally once scrolled to them, scrub shows videos where the shown frame depends on the scrolling position within the text. An additional special tag can be used for text that can be expanded by clicking on a plus symbol: • <--EXPAND-SMALL-->text to be shown in expand section
It is possible to define a full screen map by using multiple 1 (text),3 (map) blocks. Each row then defines the state of the map that should be reached when scrolling in the scrolly story. When interacting with one of the map blocks, e.g. zooming in or panning a “save map state” button will appear
There is also a duplicate element button that is helpful to create multiple map instances from within the custom dashboard. You can save then multiple positions for each map component to define how the scrollymap should behave.
It is possible to:
- use the “Add to custom dashboard” button to add the same map multiple times
- change the shown map dataset by adding another dataset using this function
- set different times for each map component – this will change the time when scrolling
Here is an example of how defining a scrolly map component can look in the custom dashboard (zoomed out to help visualize multiple blocks):
