{"id":63313,"date":"2024-06-25T07:00:00","date_gmt":"2024-06-25T05:00:00","guid":{"rendered":"https:\/\/www.mashup-communications.de\/?p=63313"},"modified":"2026-02-26T13:08:14","modified_gmt":"2026-02-26T12:08:14","slug":"scrollytelling","status":"publish","type":"post","link":"https:\/\/www.mashup-communications.de\/en\/2024\/06\/scrollytelling\/","title":{"rendered":"Scrollytelling: How can dry data be transformed into lively stories?"},"content":{"rendered":"\n<p>Scrollytelling, you read that right, is a neologism made up of the terms \u2018scrolling\u2019 and \u2018storytelling\u2019.<\/p>\n\n<p>The more prosaic definition is: <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Scrollytelling is a multimedia form of long-form journalism. With the help of merging texts, images, animations and videos, stories are created from data and information. Depending on the generation, readers can immerse themselves in the website on a mostly data-based topic using either the mouse wheel on their computer or their thumb on their smartphone. Through skilful visualisations of complex issues and a common thread, connections are explained and emotions elicited that create a personal connection to the subject and make the abstract tangible.<\/p>\n<\/blockquote>\n\n<p><\/p>\n\n<p>In short: where mere words fail to transmit the spark, scrollytelling jumps in.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/Scrollytelling-Mit-interaktiven-Websites-Geschichten-erzaehlen-1-1024x576.png\" alt=\"-\" class=\"wp-image-63217\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/Scrollytelling-Mit-interaktiven-Websites-Geschichten-erzaehlen-1-1024x576.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/Scrollytelling-Mit-interaktiven-Websites-Geschichten-erzaehlen-1-300x169.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/Scrollytelling-Mit-interaktiven-Websites-Geschichten-erzaehlen-1-768x432.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/Scrollytelling-Mit-interaktiven-Websites-Geschichten-erzaehlen-1-1536x864.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/Scrollytelling-Mit-interaktiven-Websites-Geschichten-erzaehlen-1.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<p>The prerequisite for a good scrollytelling experience is a clever data basis and clarity about which key messages are to be conveyed. Storytelling basics such as the <a href=\"https:\/\/www.mashup-communications.de\/en\/2018\/08\/storytelling-for-speeches\/\" target=\"_blank\" rel=\"noreferrer noopener\">SUCCESs formula<\/a> naturally also apply to this format. The hook has to be right for readers to really want to dive into the story.<\/p>\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100\"><a class=\"wp-block-button__link has-white-color has-mashup-blue-background-color has-text-color has-background has-link-color wp-element-button\" href=\"&lt;!--[CDATA[https:\/\/mashupcommunications.teachable.com\/p\/data-storytelling]]--&gt;\" target=\"_blank\" rel=\"noreferrer noopener\">Learn how to turn complex information into captivating images in our online course now.<\/a><\/div>\n<\/div>\n\n<p><\/p>\n\n<p>The spectrum of topics covered is almost limitless: from research to social criticism to pop culture, everything can be depicted &#8211; as long as there is a message and reliable data. To not only read about scrollytelling, but to immerse yourself in it, here are a few examples. They show how versatile this narrative format can be used: to entertain, inform, sensitise and mobilise.<\/p>\n\n<h2 class=\"wp-block-heading\"><strong>1. Unimaginable wealth<\/strong><\/h2>\n\n<p>One million, one billion? At first, both just sound like a very large number or quite a lot of money!  But <em>how<\/em> <em>much<\/em> difference the three zeros actually make is hard to imagine for most people. That&#8217;s why normal earners often have no idea what it means to be super-rich. We don&#8217;t realise the extent of this in relation to the reality of our own lives. The figures are simply too abstract. That&#8217;s why US software developer Matt Korostoff has made them tangible. His website \u2018Wealth shown to scale\u2019 shows how absurd wealth is when you have to scroll through it.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"432\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-8-1024x432.png\" alt=\"-\" class=\"wp-image-63260\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-8-1024x432.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-8-300x127.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-8-768x324.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-8-1536x648.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-8-2048x864.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\"><strong>2. How bicycle (un)friendly is Berlin?<\/strong><\/h2>\n\n<p>Under the title \u2018radmesser\u2019, the Tagesspiegel has analysed bikes as the choice of transport in the capital. Where does Berlin have good cycle paths? Where are the dangers? And what bothers cyclists the most? Data for the 2018 website was provided by thousands of survey results and hundreds of bike meters from people living in 99 different postcodes. The sensors specially developed for the project recorded data on the distances at which cars overtook the respective bike, for example. Cycle a virtual tour through Berlin and experience the pitfalls and joys of cycling.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/interaktiv.tagesspiegel.de\/radmesser\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"619\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1-1024x619.png\" alt=\"-\" class=\"wp-image-63223\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1-1024x619.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1-300x181.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1-768x464.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1-1536x928.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1-2048x1238.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><a href=\"https:\/\/interaktiv.tagesspiegel.de\/radmesser\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/interaktiv.tagesspiegel.de\/radmesser\/index.html<\/a><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>3. &#8220;Never again&#8221;: Bringing history to life<\/strong><\/h2>\n\n<p>The #StolenMemory project of the Arolsen Archives &#8211; International Centre on Nazi Persecution brings the past back to life. With a more video-heavy approach than the previous examples, the stories of deceased concentration camp prisoners are told. Objects that were taken from them when they were arrested and only returned to the family decades later serve as a hook. #StolenMemory shows the fate of millions of people &#8211; based on selected, individual stories. This emphasises their humanity, which was denied them by the Nazis.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.stolenmemory.org\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2-1024x507.png\" alt=\"-\" class=\"wp-image-63225\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2-1024x507.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2-300x149.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2-768x380.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2-1536x761.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2-2048x1014.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><a href=\"https:\/\/www.stolenmemory.org\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.stolenmemory.org<\/a><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>4. The timeline of everything<\/strong><\/h2>\n\n<p>Designer <a href=\"https:\/\/cargocollective.com\/matanstauber\/Histography\" target=\"_blank\" rel=\"noopener\">Matan Stauber <\/a>has chronologically depicted all major events in Earth&#8217;s history in a timeline based on Wikipedia entries. When was which war? In what order were the telephone, the railway and the radio invented? And how have women&#8217;s rights developed worldwide over time? Anyone who accepts the initial overload of data quickly understands how the site works and refreshes their general knowledge with intuitive clicks.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/histography.io\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"374\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-3-1024x374.png\" alt=\"-\" class=\"wp-image-63227\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-3-1024x374.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-3-300x110.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-3-768x280.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-3-1536x561.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-3.png 1769w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><a href=\"https:\/\/histography.io\" target=\"_blank\" rel=\"noopener\">https:\/\/histography.io<\/a><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>5. Looking into the future: How the climate crisis is changing our world<\/strong><\/h2>\n\n<p>It&#8217;s not just the past that can be brought back to the present with scrollytelling. An outlook into the future is also possible thanks to data modelling. The Berliner Morgenpost has a whole team for experimental presentation formats. With the help of an interactive globe, the journalists show which places climate change will make uninhabitable. With just a few clicks, you can see where it will get significantly hotter, which regions are threatened by water shortages and where in the world it could soon become uninhabitable, forcing people to leave their homes.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/interaktiv.morgenpost.de\/klimawandel-hitze-meeresspiegel-wassermangel-stuerme-unbewohnbar\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-6-1024x768.png\" alt=\"-\" class=\"wp-image-63234\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-6-1024x768.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-6-300x225.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-6-768x576.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-6-1536x1152.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-6.png 1784w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><a href=\"https:\/\/interaktiv.morgenpost.de\/klimawandel-hitze-meeresspiegel-wassermangel-stuerme-unbewohnbar\" target=\"_blank\" rel=\"noopener\">https:\/\/interaktiv.morgenpost.de\/klimawandel-hitze-meeresspiegel-wassermangel-stuerme-unbewohnbar<\/a><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>6. Scrollytelling for brands<\/strong><\/h2>\n\n<p>The scrollytelling narrative can also be used by brands to tell their story. The shoe brand Kals\u00f8 leads the way and takes interested parties on a journey from 1905 to 2021. They focus on their <em>why,<\/em> followed by the <em>how<\/em>. The <em>what<\/em>, the shoes themselves, initially appear to be of secondary importance. In this way, they create a brand identity that captivates rather than simply selling shoes.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/kalso.vaangroup.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1024x488.png\" alt=\"-\" class=\"wp-image-63220\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1024x488.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-300x143.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-768x366.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-1536x733.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-2048x977.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><a href=\"https:\/\/kalso.vaangroup.com\" target=\"_blank\" rel=\"noopener\">https:\/\/kalso.vaangroup.com<\/a><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>7. Target group analysis: The gen Z way<\/strong><\/h2>\n\n<p>Not only individual brands can illustrate their story with scrollytelling. Entire industries have the opportunity to make their reports, analyses and findings interactive and appealing. Because, let&#8217;s be honest: Who likes reading pages of text and Excel tables? Exactly. And without an audience, all the work would be wasted. Vogue Business shows how trend analyses can also be fun. They had a close look at Gen Z and its consumer behaviour and prepared the whole thing in a target group-oriented way. With the hook \u2018Gen Z broke the marketing funnel\u2019, they arouse curiosity about the mix of data and zeitgeist.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.voguebusiness.com\/story\/consumers\/gen-z-broke-the-marketing-funnel\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-4-1024x454.png\" alt=\"-\" class=\"wp-image-63229\" title=\"\" srcset=\"https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-4-1024x454.png 1024w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-4-300x133.png 300w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-4-768x340.png 768w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-4-1536x681.png 1536w, https:\/\/www.mashup-communications.de\/app\/uploads\/2024\/05\/image-4-2048x908.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n<p><a href=\"https:\/\/www.voguebusiness.com\/story\/consumers\/gen-z-broke-the-marketing-funnel\" target=\"_blank\" rel=\"noopener\">https:\/\/www.voguebusiness.com\/story\/consumers\/gen-z-broke-the-marketing-funnel<\/a><\/p>\n\n<h2 class=\"wp-block-heading\">Prerequisite for scrollytelling<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>1. Clear data basis &amp; core messages<\/strong>\n<ul class=\"wp-block-list\">\n<li>You need <strong>reliable data or content <\/strong>that is worth telling as a story\u2014the more complex the topic, the more exciting the scrollytelling.<\/li>\n\n\n\n<li><strong>Clarity of message: <\/strong>What should the audience understand or take away at the end? Without a clear core message, the format will not work.<br\/> <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>2. Storytelling basics <\/strong>\n<ul class=\"wp-block-list\">\n<li>Techniques such as the <strong>SUCCESs formula<\/strong> (simple, unexpected, concrete, etc.) and a strong <strong>hook<\/strong> that captivates readers are key requirements.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>3. Common thread &amp; structure<\/strong>\n<ul class=\"wp-block-list\">\n<li>A continuous, logically structured narrative is required to ensure that the scroll flow is intuitive and users do not get lost.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\">Conclusion Scrollytelling<\/h2>\n\n<p>If you want to successfully set up a website in the scrollytelling style, you need clarity. The core messages must be clear and the common thread visible. This is the only way to keep readers hooked. If you can&#8217;t make your way through intuitively, you will leave. Clean data and good preparatory work are therefore crucial. Perhaps that is precisely what makes it so fascinating: only those who can present a complex topic in a simple way can overcome the curse of knowledge and inspire the masses. There is no room for empty phrases. <\/p>\n\n<p>When formats are designed interactively, they also give the feeling of being able to help determine the course of the narrative thread. This appeals to the emotions and enables much deeper access to seemingly foreign or abstract content &#8211; and thus opens up new horizons.<\/p>\n\n<h2 class=\"wp-block-heading\">More articles on data storytelling<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.mashup-communications.de\/en\/2026\/02\/data-stories\/\" target=\"_blank\" rel=\"noreferrer noopener\">Case Study Storytelling: Using data stories for long-term success in media relations<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mashup-communications.de\/en\/2025\/09\/data-storytelling-video\/\" target=\"_blank\" rel=\"noreferrer noopener\">Data Storytelling in Video Form: How Numbers in Motion become an Experience<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mashup-communications.de\/en\/2025\/08\/data-storytelling-5-reasons\/\" target=\"_blank\" rel=\"noreferrer noopener\">5 reasons for data storytelling: How can we bring facts and figures to life?<\/a><\/li>\n<\/ul>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scrollytelling is a multimedia form of long-form journalism. With the help of merging texts, images, animations and videos, stories are created from data and information. Through skilful visualisations of complex issues and a common thread, connections are explained and emotions elicited that create a personal connection to the subject and make the abstract tangible. In short: where mere words fail to transmit the spark, scrollytelling jumps in.<\/p>\n","protected":false},"author":15,"featured_media":63211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16,177],"tags":[202],"class_list":["post-63313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-brand-storytelling","category-tools-en","tag-scrollytelling-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/posts\/63313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/comments?post=63313"}],"version-history":[{"count":10,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/posts\/63313\/revisions"}],"predecessor-version":[{"id":69423,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/posts\/63313\/revisions\/69423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/media\/63211"}],"wp:attachment":[{"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/media?parent=63313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/categories?post=63313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mashup-communications.de\/en\/wp-json\/wp\/v2\/tags?post=63313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}