An introduction to scrollytelling

"Scrollytelling" was a term first coined to describe online longform stories characterised by audio, video and animation effects triggered by simply scrolling the page. The scrollytelling format represented a departure from basic stories containing little or no multimedia, and also from interactive stories that were complex to navigate. One of the first examples of the style to gain widespread attention was Snow Fall: The Avalanche at Tunnel Creek, published by The New York Times.

The simplicity of the scroll-based interaction meant that readers didn't have to second-guess what to press, click, or swipe in order to see the full story. The scrollytelling format also provided novel opportunities for position-triggered multimedia events, such as video playing, animation, and image transitions. This enabled a dynamic interplay of text, imagery, and sound that gave the story an engaging rhythm and provided elements of unexpected surprise as components came to life.

The accolades and reader metrics proved that audiences loved scrollytelling stories: spending longer with them, reading further, and sharing more. Editorial teams discovered new uses for the style as well. The reader engagement stats and highly visual presentation made it a compelling proposition for brand partnerships and native advertising.

Corporate users loved applying this interactive treatment to their content, too, as it elevated information in a way that had not been possible with static PDF reports — and it also proved a more accessible format than Powerpoint or Keynote presentations. Read more in our guide on the limitations of PDFs.

Producing stories that felt special and visually engaging, however, was expensive and labour-intensive. Each interactive article could require months of work from a team of software engineers, designers, data journalists, and writers. That meant the technique was reserved for only the biggest stories by the biggest publishers, and was out of the question when tight deadlines mattered.

Scrollytelling was engaging, flexible, and looked great — but the cost and production time had to come down before it could reach a bigger audience.

Shorthand was created with the express purpose of lowering the barrier to entry for interactive storytelling. It enabled faster and more affordable production of scrollytelling stories, without the need to involve big teams, or to write a single line of code. The launch of the Shorthand editor in 2014 meant the format was finally accessible and affordable not just to big publishers — though Shorthand counts many of the world's largest and most respected publishers among its ardent users — but also, with the rise of interactive marketing, to nonprofits, universities, corporates, and brands.

The shift from slow and expensive hand-coding to fast and easy creation didn't come at the cost of reader engagement: Chartbeat reported that in 2017, five of the ten UK news stories with the highest average engaged time were created with Shorthand — including the top two stories. 

Today, scrollytelling is used to tell all manner of powerful, experiential stories, using leading web design techniques to provide fully-responsive rendering across desktops, laptops, tablets and phones.

While this type of story could be coded from scratch — or possibly built with tools like Ceros, Foleon or Webflow, given enough time, web design resources, and training — each of the following examples was created by editors, writers, and/or digital producers using the drag-and-drop features of Shorthand, designed specifically for interactive news journalism and brand journalism.

By their very nature, visual stories often require the input of graphic designers, but there were few or no web design or developer resources required for the production of these stories.

Looking for more inspiration? Check out our roundup of scrollyteling examples.

Magazines and newspapers were some of the earliest adopters of scrollytelling, choosing it for feature stories and partner content, and as a way to present data, explain concepts, and immerse online readers in a multimedia experience.

Feature stories

In the story Mission Jurassic: Searching for Dinosaur Bones, BBC News uses a rich array of media — text, photo, video, illustration, and infographic — to dig into the world of fossil-hunting palaeontologists.

The story is an immersive, educational experience. In a video, a scientist discusses the tools she uses to identify bones. A computer-animated brachiosaurus nods 'hello'. An infographic compares dinosaur sizes to a Boeing 737.

In a particularly engaging moment, the outlines of a stegosaurus' bones are revealed as the reader scrolls past a photograph of a fossil. The bones are then labelled and demystified for the layperson. In Shorthand, this kind of interaction is created simply by uploading two images into a 'Reveal' section — no code or tricky animation settings required.

Partner content

Many publishers have found success using scrollytelling for their branded content, as seen in this partner story between Fossil and Complex. The visual transitions — which are pre-built options in the Shorthand editor — make for a more dynamic story, providing readers with a positive and memorable brand experience.

Read our guide to see more stunning examples of native advertising, otherwise known as sponsored content.

Fuelled by a need to create more authentic engagement with customers and community, brand journalism has matured well beyond the basic release of company or product attributes and announcements. Companies around the world have realised the value of brand storytelling and having an editorial voice. Many have found creative ways to integrate multimedia content into their PR, owned media, and corporate communications strategy.

Marks & Spencer (M&S) is a preeminent department store in the UK, selling everything from sandwiches and trench coats to furniture and insurance. In order to communicate its commitment to sustainable food and fashion, M&S created a microsite composed of multimedia stories on topics such as its dedication to sustainable cotton cultivation and animal welfare.

Learn more in our guide to brand storytelling.

Christie's is another brand that has seamlessly incorporated visual storytelling into its digital content strategy. The premier art auction house uses scrollytelling to dive into the history and background of the works it auctions — whether that's Picasso's still life paintings, Andy Warhol's silkscreen portraits, or chess sets designed by artists such as Barbara Kruger and Damien Hirst.

Nonprofits and charities are drawn to scrollytelling as a way to forge powerful connections with their audiences, to raise funds, and to inspire positive change in the world. This is also true for universities, NGOs, art foundations, and even government bureaus — all of which use Shorthand for interactive journalism.

In A Wilderness of Water, the United Nations Development Programme (UNDP) tells a moving story about the world's oceans and the threats they face. The UNDP uses a combination of stunning photography, illustration, and film to communicate with impact. Sea monsters appear on the screen as the reader scrolls — but it is soon revealed that the real monsters lurking in the ocean are much scarier: pollution, plastic, and human exploitation.

Learn more in our guide to digital marketing for nonprofits.

Digital media has come a long way.

Interactive, multimedia storytelling formats have proved so successful because some things just can't be communicated with words alone. In a world of ever-shortening attention spans, the power of scrollytelling — of drawing readers in to engage deeply and genuinely with your story — cannot be understated.

If you're feeling inspired to do some scrollytelling of your own, we invite you to experience Shorthand for yourself — you can publish your first story free, and the simple editor means you'll be able to drag and drop your way to a beautiful story in no time.

If you're currently teaching or studying journalism, communications or marketing at a university or college, your class is eligible to apply for free access to the "Shorthand for Classrooms" program — offering all the features of Shorthand used and loved by the BBC, Business Insider, Adweek, and other world-renowned publishers.