Scrollytelling - Scroll triggered story telling

The Challenge

The Telegraph Product team wanted to explore more engaging ways of telling stories. Their journalists have great stories and amazing photography, but some stories required a more tailored approach, one that showcased the unique nature of the subject.

I was assigned to work alongside a designer in order to explore new ways of presenting traditional article content within the constraints of the existing CMS.

Solution

The best approach was to author all content within the CMS as usual, but progressively enhance that content with animations and style overrides. Editorial staff could continue their usual work, while any changes I made could easily be integrated into future CMS updates.

One of the aspirations was to more prominently feature imagery in the articles. I used a combination of grid-template-columns overrides, position: sticky and the IntersectionObserver() API to use the full extent of the viewport, keeping images in view as the user scrolled.

Several considerations needed to be taken into account when determining animations, such as duration, easing function, and trigger points. All of these attributes changed the tone of the content, making it feel more solemn with slow easing transitions or more energetic with exponential curves. I found the best way to choose the right values was through experimentation, so I built an editor that allowed designers to test different settings.

One Year look back at Covid Lockdown was the first project to use this tool, featuring transitioning photography overlaid with text that gave context to the images as they scrolled by.

Readers welcomed the prominence of imagery against the emotional writing and praised the creative approach to a sensitive story.

Project skills