What do web creators use to infuse their visual storytelling — its messaging, aesthetic prestige and of course, deeper resonance among users? How much can our brand stories come to life on the blank slate of a webpage? 

The answer is scrollytelling: an illustrious, increasingly popular way to leverage a digital interface and convey your intricate story. 

But what is scrollytelling? Why is it a web creator favorite? The answers are obvious: its advanced design effects outshine traditional techniques that are potentially outdated and don’t do your content justice. 

But is scrollytelling always the go-to method to tell your story? How can web creators identify when this technique will best convey their messaging and product value to visitors?

This is, without a doubt, an exciting visual and information design niche. Let’s get our feet wet with scrollytelling, ankle-deep if you will, and admire spot-on use-cases of web creators using scrollytelling to nail their branding and content strategy goals.

Need a More Engaging Site? Here's How We Transformed Ours

Table Of Contents

What Is Scrollytelling?

Scrollytelling is the fusion of scrolling and storytelling: a way to dynamically tell long-form stories as the user scrolls. In this framework, user activity triggers transitions between elements and styling methods of all sorts: alternating texts, changing imagery, interactive backgrounds, animation effects, sizing changes, and more. Together, every single element blends together and conglomerates to form a flowing, alluring story in motion. 

These visual effects strive to captivate your audience, serving them engaging content on a silver platter. Scrollytelling is also referred to as “narrative visualization”: a series of visual elements sequenced together according to a logic that conveys a specific message to visitors. 

What’s most unique about this innovative storytelling technique is that users contribute to your narrative via their own individual gestures. This happens both on the collective and individual scale — as you can configure independent settings for any element, such as timed entrance animations or motion effects.

7 Use-Cases Where Scrollytelling Is the Answer

You won’t find a written rule about when to use scrollytelling for your website, but you will find use cases where storytelling is highly conducive to user engagement. 

These scenarios range from chronological stories, brand storytelling, journalism, e-commerce websites, and many more. As web creators discover more and more content visualization techniques, more scrollytelling use-cases are born.

Use-Case #1: Long-Form Journalism

Scrollytelling’s virtuosity as form of journalism lies in the ability to utilize digital media to relay complex information and stories. Two-star Michelin star chef José Andrés’s story on HuffPost fits this bill: he founded “World Central Kitchen” in 2010, providing smart solutions to end hunger and poverty in the wake of disasters.

Once the COVID-19 pandemic hit the world hard, Andrés recognized the need to maintain awareness of global food shortages and distribute meals in big city, low-income neighborhoods. There are heaps of information to relay about Andrés’s pandemic response story; what inspired the founding of World Central Kitchen, Andrés’s disaster-relief activity since 2010, the book he wrote: “We Fed an Island” and much more. 

So, in the case of José Andrés, his culinary superhero tale was transformed into a dynamic, engaging experience.

You Can Do It, Too

  • Use Background Videos for your hero image: This is a subtle, yet dynamic way to introduce your story in a language that will excite users. 
  • Consider using a single-column website layout for your text body. Scrollytelling often involves a lot of smaller moving objects around the main content, so keeping your visitors’ eyes on you becomes easier when the reading experience is solely vertical.
  • Play around with font sizing and typefaces. Sporadic enlarged text elements can break up long chunks of text without disorienting the reader. This is especially true when you combine two contrasting typefaces: chunky serif headings coupled with minimalist sans-serif texts.

Use-Case #2: Brand Storytelling

If you haven’t realized already, we, as web creators, love scrollytelling. We’ve even taken it upon ourselves to use scrollytelling in one of our most recent blog posts: “Elementor Celebrates 5 Years”. This post is where we proudly share some of our most notable accomplishments as web creation pioneers, along with fun facts about the Elementor team. 

We used some of our favorite widgets to spice up simple facts and statements, accentuating the celebratory element of our 5th birthday story tale. As you scroll down, some elements move around, some change shape, and some simply remain fixed where they are. All it took was some Lottie animations, rotating icons, entrance animations, and of course, lazy load: and a vibrant, out-of-the-box post format was born. 

You Can Do It, Too

  • Rotate your Icon Widgets with the “Rotate” scrolling effect. When icons are simple, it’s easy to add a touch of complexity by making the elements rotate just a tad.
  • Keep your numbers moving with the Counter Widget. If you want to show a phenomenon like numerical growth but don’t want to write it out, show numbers rising in real-time.

Use-Case #3: Product Pages

The Apple dynasty has the upper hand in terms of what they can do with their scrollytelling: they can focus heavily on visuals and have less of a need to explain their products or provide context about their added value. 

This is mainly because Apple products are so popular that once laying on a new Apple product, anybody familiar with the mobile device market can easily recognize the item’s added value and uniqueness. 

And so, when it comes to scrollytelling, Apple has the advantage of emphasizing the intricate details of their merchandise, rather than balancing visuals with texts. 

This is exactly what we see on the AirPods Pro product page, which has the liberty to interactively show the different color options of their earphones and show a use-case of a happy customer using them. They’re free to choose very few words and can cut right to the chase of what makes the earphones unique and how they enhance the customer experience — all without much explanation of what the product actually is. 

You Can Do It, Too

  • Level up your design game with Custom CSS. When you have lots of images to show users but want to do so one at a time, you can make that happen by having the images change on scroll.
  • Show happy customers. When people see how much music enthusiasts love AirPods, they’re keen to try them out.

Use-Case #4: Online Stores

When your flagship beverage product has beautiful packaging design, your product storytelling can skyrocket. The more intricate and elaborate your brand imagery and designs, the more depth you can add to your story. Who would have thought that so much could be said about a cannabis-infused social tonic?

A tale about such an innovative, original multi-faceted beverage involves a lot of details: the ingredients, the story behind it, how it’s produced, where to buy it, when to drink it, etc. With so many points to include, scrollytelling incorporates many facts and figures into one visual landscape. 

And now for the challenge: addressing many small details without cognitive overload or too much visual stimulation. This is where parallax effects come in handy, animating the simple, outlined circles that float upon a solid background. With miniscule interactions that first appear as minor design details, tiny animations suddenly become larger than life. 

You Can Do It, Too

  • Use Text Path Widget to add a layer of excitement to small text elements. When you want to make sure your words get read, the smallest motions can go a long way.
  • Choose complementary color schemes to make animations more noticeable. Part of what makes the thin purple illustrations’ movement so recognizable is that they’re on a contrasting yellow background. Thanks to this contrast, purple stands out among the yellow, and the moving elements are noticed immediately.

Use-Case #5: Creative Portfolios

Telling the story of your professional journey and the projects you’ve done has the potential for a plot that thickens as you scroll down the page. Different visual effects and animations can enhance the project thumbnails, showing your collection of individual creations as a cohesive entity. 

Portuguese front-end developer Fábio Azevedo has a highly unique slider gallery where he showcases his creative workflow. With simple out-of-the-box image shapes, Fábio creates a gallery of thumbnails that succeeds in displaying many different image styles in one row, without borders, that doesn’t look too chaotic or overwhelming to the user. As we see, he applies his talent consistently to each project, yet each one bears concerted individuality. 

The cohesiveness of Fábio’s gallery is also made possible by the hover effects he uses, where the image overlay disappears on hover, revealing the project’s name, client’s name, and coding languages used.

You Can Do It, Too

  • Use the Mask Option that we recently introduced in Elementor 3.2. Mask Option lets you transform any website element into a mask-based shape of your choice. Once you do this, you can recreate the unique thumbnail gallery (or similar) that Fábio features on his homepage. 
  • Utilize Elementor Slides Widget to build responsive sliders, including animations and special effects that put your design talent at the forefront of your portfolio.

Use-Case #6: Chronological & Historical Stories

Ever been to Amsterdam? If you haven’t, you don’t need to travel very far. This site built by Marcus Brown and Aristide Benoist tells the historical story of the landmark Amsterdam canals, built way back in the 17th century. In short, you can consider this horizontal scrollytelling to be a digital sightseeing experience.

Some might say that geographical and urban landscape history is boring, but the CANALS website proves otherwise. Juxtaposing scenic images with top-to-bottom backgrounds and heavy black texts makes it incredibly easier to appreciate both the image content and written words of the story. 

We mustn’t forget that “Canals” starts their story in the mid-1200s, leading all the way up to the 21st century. As we see, finding balancing images, text, and motion harmoniously in one confined space is no small feat, but definitely doable. 

You Can Do It, Too

  • Explore the option of horizontal scrolling. When much of your content comprises large images and corresponding paragraphs of text, a landscape page setup can make sure every element is 100% visible.
  • Take advantage of the different font weights available for your typeface. When you want texts to be understated so that your images are center stage, thinner font weights can make a difference.

Use-Case #7: Current Events

Websites committed to spreading awareness about a cause or event need to make their story as effective as possible. In its very essence, the goal of a website like “Every Last Drop” is to make its campaign for water conservation known to the masses. What better way to do this than a cartoon-like story of a red-headed astronaut getting ready for work in the morning?

The numbers of how much water gets wasted in today’s world are high, to say the least. 150 liters of water are wasted per day in the UK, a five-minute shower uses 40 liters, a regular bath uses 80 liters … we may have expected paragraphs of texts to follow the images and explain how these figures are possible to begin with. 

Scrollytelling to the rescue. Rather than lengthy explanations about research findings and scientific reasoning — an illustrated story about a regular joe heading to work tells us all we need to know. The astronaut represents a large segment of the world population, and following his daily routine shows us how quickly the layman consumes water without realizing it. The proof is in the pudding, and there’s no real need for data visualization, graphs, dashboards, and most of all, explanation paragraphs from top to bottom. 

You Can Do It, Too

  • Look into Elementor Mouse Effects. These mouse tracking features allow you to configure certain elements to move in relation to visitors’ mouse activity. This is the perfect option for scrollytelling — as your content will move as the user navigates.
  • Apply vertical scrolling effects to your page backgrounds. Not only can you choose the motion speed, but you can also determine where the movement begins based on viewport height.

Now, It’s Your Turn to Scrollytell

We’ve touched upon the many faces of scrollytelling: when to use it, which features make it possible, the most promising examples, and why it’s worth your while. 

Web creators have a lot of industry trends to keep up with — motion effects, 3D design, interactive elements, and you can now combine them all. Keep us in the loop of your scrollytelling projects, and make sure to share them in the comments so we can take a first look!