We are currently working on some Scrollytelling interactive storytelling formats. That is why Gabriel has set out in search of the best examples. This was not only about staging the stories, but also about translating the formats on smartphones. Especially with more complex projects this is really a high art.

Good use of illustrations/animations

Successful stories structured by time

Inspirations for geographical outlines

Good use of infographics

More Scrollytelling examples

Use of illustrations, animations and videos

Illustrations, animations and videos can be an essential part of telling, illustrating and understanding stories. The following examples show how these can be used effectively to create added value.

I am Binadam

special features

Illustrations give more weight to the statements

good graphics, which prove the problems factually

successful implementation for mobile devices

http://www.iambinadam.org/en/

iambinadam - Die besten Scrollytelling Beispiele
iambinadamMobile - Die besten Scrollytelling Beispiele

Maria Callas

special features

beautiful illustrations

+ suitable background music

+ responsive Design

- long loading times

http://www.maria-callas.com/en/life

Maria Callas - Die besten Scrollytelling Beispiele
mariaCallasMobile - Die besten Scrollytelling Beispiele

caught

special features

well-placed illustrations, animations and videos illustrate the content and illustrate the problems addressed

+ Responsive Design

https://interactives.stuff.co.nz/2018/05/caught/

caught - Die besten Scrollytelling Beispiele
caughtMobile - Die besten Scrollytelling Beispiele

The Boat

special features

+ Comic Style

very nice drawings

Animations and sound skillfully used to underline dramaturgy

- no response Design

http://www.sbs.com.au/theboat/

Screenshot 2 - Die besten Scrollytelling Beispiele

Wheel knife - day mirror

special features

good information structure

meaningful illustrations & animations

+ Responsive Design

https://interaktiv.tagesspiegel.de/radmesser/index.html

radmesser - Die besten Scrollytelling Beispiele
radmesserMobile - Die besten Scrollytelling Beispiele

Joey Badass - Political MC

special features

good mixture of videos, photos, effects

- no response Design

http://badass.shoes-up.com/

Joey Badass - Die besten Scrollytelling Beispiele

Successful stories structured by time

In most cases, the stories are presented on the basis of a chronological progression, thus creating a clear structure for the reader. Timelines, which can be implemented in different ways, are a popular stylistic device.

20 years of Hip-Hop culture

special features

very nice timeline

exciting navigation concept

very good response Design

http://bboylilou.redbull.com/en

redBull - Die besten Scrollytelling Beispiele
redBullMobile - Die besten Scrollytelling Beispiele

Les Chariots Fenwick 

special features

very nice timeline and navigation

+ Responsive Design

https://www.histoire-chariots-fenwick.fr/

LesChariotsFenwick - Die besten Scrollytelling Beispiele
LesChariotsFenwickMobile - Die besten Scrollytelling Beispiele

Histography - Timeline of History

special features

Timeline of all historical Wikipedia entries

navigation points with links to the corresponding Wikipedia articles and videos

Temporal and thematic navigation options

- no support for mobile devices

http://histography.io/

TimelineOfHistory - Die besten Scrollytelling Beispiele

hollow documantary

special features

interactive documentation

beautiful structure and guidance through history

- no response Design

- sometimes very long loading times

http://hollowdocumentary.com/

HollowDoc - Die besten Scrollytelling Beispiele

Kazumasa Nagai

special features

Prominent time data

produced with the Storytelling-System readymag.com

simplified functionality in Responsive Design

stories.readymag.com/nagai

readymag - Die besten Scrollytelling Beispiele
readymagMobile - Die besten Scrollytelling Beispiele

Inspirations for geographical outlines

In addition to the chronological structure of the stories, it is also possible to tell them using a local context.

How Germany commutes - Spiegel Online

special features

Records of commuter routes using interactive maps

+ Responsive Design

http://www.spiegel.de/wirtschaft/verkehr-so-pendelt-deutschland-zu-arbeit-a-1187172.html

Pendler - Die besten Scrollytelling Beispiele
pendlerMobile - Die besten Scrollytelling Beispiele

Listen to America - Huffington Post

special features

single line drawing guides through the individual stories

Stories by cities

in Responsive Design the animations are omitted

-=https://m.huffpost.com/us/interactives/listen-to-america?category=- proudly presents

ListenToAmerica - Die besten Scrollytelling Beispiele
listenToAmericaMobile - Die besten Scrollytelling Beispiele

Victims of right-wing violence - Zeit Online

special features

Germany map as navigation element

- Adapted to different screen sizes, but not fully optimized for Mobile

https://www.zeit.de/gesellschaft/zeitgeschehen/2018-09/todesopfer-rechte-gewalt-karte-portraet

TodesopferRechterGewalt - Die besten Scrollytelling Beispiele
rechteGewaltMobile - Die besten Scrollytelling Beispiele

Good use of infographics

Graphics can be used to provide factual evidence for specific points in the stories and to present them clearly.

Soccer World Cup 2018 - Mirror Online

special features

skilful and informative use of various formats (maps, charts, photos, illustrations etc.)

small information packages ensure a pleasant interaction

very good implementation for mobile devices

http://www.spiegel.de/sport/fussball/fussball-wm-2018-alles-ueber-das-wichtigste-fussballturnier-des-planeten-a-1212539.html

FußballWMSpiegel - Die besten Scrollytelling Beispiele
FussBallWMMobile - Die besten Scrollytelling Beispiele

Plastic waste - Mirrors Online

special features

Interactive quiz elements increase the attention of the user

Infographics present facts in a clear manner

+ Responsive Design

http://www.spiegel.de/wirtschaft/muell-wieviel-plastik-abfall-erzeugt-jeder-deutsche-und-geht-es-auch-ohne-a-1207303.html

PlastikMüll - Die besten Scrollytelling Beispiele
PlastikMüllMobile - Die besten Scrollytelling Beispiele

Other successful examples

Bryan James

special features

Showreel as navigation element

Responsive Design with adapted navigation

https://brybry.co

ShowReel - Die besten Scrollytelling Beispiele
brybryMobile - Die besten Scrollytelling Beispiele

Trump and The Truth - The New Yorker

special features

wheel of fortune as random navigation

creative idea and good implementation

simple, functional response Design

https://www.newyorker.com/news/news-desk/trump-truth-spin-wheel-lies

trumpSpinningWheel - Die besten Scrollytelling Beispiele
trumpAndTheTruthMobile - Die besten Scrollytelling Beispiele

Inequality is expensive

special features

simple interactivity

understandable illustration of the topic

- relatively unloving design of the website

http://inequality.is/expensive

Inequality - Die besten Scrollytelling Beispiele
InequalityMobile - Die besten Scrollytelling Beispiele

👉 You can find out more about storytelling at Here or Here.
And you can get advice here: