Scrollytelling: Creating Interactive Web Experiences

What is Scrollytelling?

Scrollytelling is the practice of progressively or interactively displaying elements on a page as the user scrolls. It combines “storytelling”, the art of telling stories, with “scroll” techniques, that is, scrolling through the page.

With scrollytelling content items on a webpage can appear, move, disappear, or otherwise change as the reader interacts with them. Content creators can now make their audience feel part of the story by creating immersive experiences and enhancing written text with multimedia like audio, video, and animation.

This has great potential for all types of content, including journalism reports, historical event narratives, education interactive lessons, and even fiction. These advanced content practices stand out against a universe of increasingly similar content.

At Aplyca, we have found that firms seek to achieve a higher level of interaction and dynamism in their content while their content management or XP platforms (experience platforms) support the creation of this type of pages for an existing editorial team. This article will present essential scrollytelling practices and options for incorporating them into current content management systems.

Enhanced reader engagement through interactive content

Imagine this: you land on a webpage and instead of clicking through static pages or images, your journey through the narrative is dictated by scrolling or swiping. Each motion reveals new layers of information, visuals, and perspectives, creating a dynamic, interactive experience that encourages discovery and exploration.

In a world of web content optimized for search engines, where mass content construction and keyword optimization prevail, producing content rich in interactivity, data visualization, and other elements in innovative experiences becomes paramount. 

Scrollytelling enhances engagement by putting the user in control of their journey, empowering them to explore and engage with the content as they see fit.

Our clients are receptive to these types of experiences when referring to sites like the New York Times, which have specials with higher levels of interactivity and quality in their production. However, they often see it as a set of advanced techniques outside their content management platforms or editorial teams' reach. At Aplyca, we have investigated these practices under our Aplyca Labs Initiative and are sharing our insights with readers. Here is an example of Scrollytelling: Contentful.

We have found that our clients want to highlight their content, honor the premise of building outstanding digital experiences, and transcend the production of content that is oriented only to text and images. They want to go further by integrating data, visualizations, animations, and other elements within the structure of its pages

When to Use Scrollytelling

Scrollytelling empowers creators to craft narratives that unfold organically, adapting to the user’s pace and preferences. More and more content is revealed as the reader interacts with the page: each scroll seamlessly integrates multimedia elements like videos, maps, and animations. One technique consists of using “steppers,” where the reader clicks step by step to unfold layers of the story.

As Bill Shander explains in his article “The Past, Present, and Future of Scrollytelling,” the practices used to keep your audience engaged and avoid losing your readers have changed over time. At first, producing shorter pieces that made readers click more times to access additional content was typical. However, it soon became evident that scrolling was an easier, more intuitive way to engage with content. Scrolling is now considered fundamental for a good user experience. 

Instead of passively consuming content, you can transform content and make it more attractive when readers become active participants, choosing how deep they dive into each topic and which paths they explore. This interactivity fosters a deeper connection with the material, making complex subjects more accessible and compelling.

These tools are excellent for: 

• Visualizing data: Complex information can often be challenging to convey. Presenting it with infographics, charts, and animations can help. 

• Narrating stories: Telling narratives that flow as the reader interacts with them creates a more engaging experience.

• Instructional content: These tools and practices work well for educational purposes, such as history lessons and explanatory presentations.

• Reports and presentations: Scrollytelling is great for showcasing products, company results, and basically any type of result. 

• Journalism pieces: After the impact of the Snowfall report from the New York Times, scrollytelling has experienced a boom in journalism. The way it integrates text, images, videos, and interactive elements has potentialized investigative reports for a more immersive news experience.

Elements of Scrollytelling

Central to scrolly-telling is its emphasis on design as a storytelling tool. The typical components of scrollytelling include infographics, 3D graphics, text animations, and audio elements. Some of the most commonly used practices are:

• Horizontal Scrolling

• Sticky Position

• Video scrolling

• Parallax Scrolling

• Scroll-Triggered Fades

• Scroll-Triggered Animations

• Scroll Progress Indicators

The practices that content creators and editors decide to use will depend on, among other factors, the data they need to communicate, the story they want to tell, the audience it’s meant for, and the end goal of the immersive experience.

Every aspect—from layout and typography to color schemes and transitions—contributes to the narrative’s impact. Visual cues guide the reader’s progression, while subtle animations add depth and context. The result is an immersive experience that captivates the senses and resonates long after the screen is turned off.

The editorial skills to produce this content go beyond a text narrative and require storytelling skills. This content structure is more similar to cinematographic or animation media and can benefit from using tools like a storyboard or other similar practices to define interactive, non-linear experiences.

At Aplyca, we can help you determine the best scrollytelling options for your needs.

Using web architecture in your favor

With an appropriate information architecture and a modern front-end layer, scrollytelling can be adopted within modern content management systems without the need to manually code each piece of content. 

​​A hybrid between content produced at a higher speed with less interactivity can be enriched with unique elements using scrollytelling techniques when these enrich the experience or help explain complex concepts to users.

Some of the development tools that can be used to create interactive web content and experiences include:

• Development Tools: This requires being adept at working with code. Examples are scrollama.js, waypoints.js, scroll magic, scrollstory.js, HTML, and CSS. 

• Web designer platforms and tools: These are great for graphic and web designers and don’t require them to write code. Examples include Bubble, Flourish, Adobe After Effects, Motion (Apple), LottieFiles, RiveApp, Spline. 

• Immersive content platforms: Built for content teams and publishers. Examples include Shorthand, vev.design, Webflow, Treedis. 

Remember that scrollytelling must be done carefully to avoid being sluggish, confusing, or unresponsive. As Robert Kosara aptly explains, several things can go wrong with scrollytelling. This is the case when scrolling causes unexpected behavior, awkwardness, and misalignment between the form and the story. For this immersive experience to work well, it must be effortless and fluid. 

Talk with us

As technology evolves and user expectations continue to rise, using scrollytelling holds limitless possibilities. Contact us to discuss how our team can help you use the power of scrollytelling to inform, inspire, and connect with your readers.