The Rise of the Scrollytelling Website

May 5, 2023

Words by Jeff Cardello

The best brands use storytelling to connect authentically with their audience—scrollytelling websites are how designers achieve this.

A scrollytelling website is a design-led way to tell stories, transforming what was once the domain of plain text and fixed images into an interactive, immersive user-experience. A visual storytelling technique, scrollytelling allows you to tell stories in more interesting ways, giving you a variety of elements you can use in introducing animations, novel ways of scrolling, and other dynamic features that keep viewers focused and engaged with your content.

Whatever story or ideas you’d like your viewers to experience, no-code tools like Vev make it easy and affordable to design high-quality, visually-driven narratives. Let’s discover more about scrollytelling, and take a look at some of the finest examples.

What is a Scrollytelling Website?

The portmanteau of “scrolling” and “storytelling”, scrollytelling is a visually driven and interactive way of relating narratives, communicating ideas, and educating readers. It gives viewers control over how they experience content, revealing text, photos, videos, data visualizations, and other content on scroll. Dynamic elements like scroll-triggered animations and transitions, hover effects, and image carousels all come into play in offering visitors lively and captivating user experiences.

Popular Uses of a Scrollytelling Website

A scrollytelling website offers immersive and effective ways of engaging and communicating information, giving viewers a great level of autonomy over how they experience it. Whether a scrollytelling website is used to entertain, inform, or deepen understanding, this format for telling stories can be used in a variety of ways, and by a number of industries.

Editorial

Editorial content—be it articles, advertorials, or photo essays—can greatly benefit from the magic of scrollytelling. Where journalism was once the domain of paper and ink, evolving web design techniques and the emergence of visual journalism make it possible to deliver news stories in ways that are interactive and action-packed.

Commercial

Scrollytelling can also function as a visual design tool for marketing. From product pages to annual reports, scrollytelling is a way to connect with customers and have them take in the information that a brand wants them to learn about.

Scrollytelling Website Examples to Inspire You

Scrollytelling has become an increasingly common technique that’s taken on many different forms across a wide range of topics. Let’s dive into ten different examples showing you the multitude of ways it can be used.

ServiceNow

ServiceNow, develops cloud-based software for companies across many different industries. Built with Vev, this scrollytelling website gets into the challenges like rising inflation, supply chain disruptions, and talent shortages that are all cutting into companies’ bottom lines. These are serious issues, but ServiceNow shows the positive outcomes these problems can lead to, and how technology can help.

There’s a lot of information to take in, yet this scrollytelling website keeps things moving with plenty of motion. Using Vev’s library of pre-built fade-in animations, sticky position sections, image comparison sliders, and other animated effects give this design a sense of momentum, leading readers through all of the important points with ease.

The Story of Akzidenz-Grotesk

The Story of Akzidenz-Grotesk details the history of this typeface, telling the story of its origins, as well as how it has subsequently been used in graphic design over the years, accompanied by great visual examples, from album covers, poster art, and book design.

The web design is composed of geometric lines and blocks, echoing Swiss design—the type of graphic design of which Akzidenz-Grotesk was the major typeface. With large text in the website’s namesake typeface, and visible gridlines, this design looks what you might see in an artsy book about typography. Though this scrollytelling website has a strong sense of linearity and structure, there are several effects that loosen it up including animated text, parallax scrolling, and hover interactions.

Scrollytelling is such an effective medium in teaching people about something, and we love seeing designs like this that combine educational content with imaginative visuals.

Origins of Clay

Scrollytelling unveils information piece by piece, making it such an effective medium for narratives about historical events. Stories of Clay takes visitors through five different virtual rooms, offering not only writing and visuals educating about Japanese post-Imjin pottery, but a high degree of interactivity. Horizontal scrolling, zoom buttons, scroll-triggered transitions, and clickable image hotspots bring the history of this pottery alive, pushing you forward in exploring everything there is to see.

World Heart Federation

The World Heart Federation utilizes some of Vev’s most creative features in telling the story of its year in this annual report. Horizontal scrolling sections provide a sense of variation to the layout, giving this piece of long-form content room to breathe. The report also uses sticky position and scrollytelling sections—in which key messaging animates above photos and videos— to keep readers scrolling and engaged. Animations like time-delayed fade-ins and number counters are another fun addition, further adding to the visually rich user experience. 

This design is very much a multimedia experience, also making use of Vev’s Embed Anything feature with content blocks like YouTube videos and Spotify playlists, further elaborating on the stories about the people who are a part of its organization and the cardiovascular health outreach that they do.

Two Authenticators

Two Authenticators are in the niche business of authenticating and reselling designer bags. In this design, they communicate their process of authentication and pricing, as well as what makes these vintage luxury bags so special. A standout feature of this scrollytelling website are the background videos that zoom in and out as a new section of information appears. You can tell that they have a passion for these premium accessories—it is obvious in both the writing and visuals you’ll find throughout this website which is driven by storytelling.

John Oliver Collection

The vines that bear the grapes that Road 13 Vineyards depends on in crafting their wines are nourished by the irrigation that was developed by John Oliver at the beginning of the nineteenth century. Without this life-giving water, the Similkameen Valley would be a much more barren place. The vineyard pays homage to John Oliver with a collection of wines named after him, and made a scrollytelling website in Vev to tell the story. The bulk of the details of John Oliver’s life are navigated through a horizontal scrolling section of photos, quotes, and writing profiling his accomplishments.

Norwegian Salvation Army

The Vev-built scrollytelling design highlights how the Norwegian Salvation Army helps those in need. Using Vev’s pre-built scrollytelling image sections, illustrated scenes of snowy cityscapes fade in and out as text rolls above, leading you into the personal stories of those facing hardships. Through artistry and writing, this design humanizes the struggles that these people face, and how the Salvation Army is able to bring comfort to those in need.

Alphonse Mucha

Famous for his Art Nouveau posters featuring women with long flowing hair, flowers, vibrant colors, and decorative elements like jewels and pearls, Alphonse Mucha was a Czech artist active in the late 19th and early 20th centuries. This scrollytelling website utilizes scrollytelling in covering his life and his contributions to graphic design.

Throughout there are huge images capturing his distinctive style that fade in as one transitions from one section to the next. Writing accompanies these visuals giving insights into the artistry and its significance in advertising. There’s a strong chronological sense in detailing Mucha’s life and work revealed in a patient and captivating way through the power of scrollytelling.

Alexander Ovenchkin

Alexander Ovenchkin is considered by many to be the best player currently in the NHL. Having recently joined the exclusive 800 club, which is hitting 800 regular season goals in a season, he has achieved much, and there is a lot of excitement around him in the sport of hockey.

There’s much to love visually in this scrollytelling website, with dramatic clips of Ovenchkin’s powerful playing, data visualizations representing his stats, time-delayed photos and text, as well as scroll-triggered animations. Once in the main story, you can scroll to move the story along, fast-forwarding through a montage of video to discover the various chapters. A scroll progress bar at the bottom of the screen moves along with you, and has various markings to indicate a data visualization, new chapter, or clickable button to read more information. Much like the game of hockey, there isn’t a dull moment, with every space filled with movement and eye-catching action.

Vestiaire

Vestiaire Collective offers a resale platform for those who want to sell high-end fashion as well as accessories. Since they’re in the business of giving fashion products a second life, a big part of their brand message focuses on sustainability. Reports are responsible for communicating much in terms of statistics and details. Scrollytelling techniques in this impact report like number counters, animated data visualizations, and text animations adds a dynamism that keeps this information from becoming overwhelming.

Watch Our Scrollytelling Masterclass

Scrollytelling opens up new and creative ways for people to experience web content. Get an in-depth look at how to build your very own scrollytelling website without writing any code. In this masterclass you’ll get a walkthrough of popular techniques and scroll-triggered animations to elevate any visual story, landing page, or web experience.

Want More Inspo?

Get our monthly newsletter straight to your inbox.
You can always unsubscribe at any time.
Privacy Policy