How to create interactive graphics

At Shorthand, we're passionate about making sure all our users know how to get the very best results with our tool.

By Dawn Murden

We recently ran a webinar covering the Scrollmation and Background Scrollmation sections in Shorthand, and some great ways you can use them to add interactivity and animations to your web content. Here's a quick recap, including our top tips and links to stories that demonstrate how to get the most out of these section types.

So, what are the Scrollmation sections?

The Scrollmation sections are two section types within the Shorthand storytelling tool — available on most Shorthand subscription plans. 

Background Scrollmation

This section allows you to overlay a text column onto full-screen background images. The text can be positioned left, right or centre.

When you opt for more than one background image, the act of scrolling through the section steps the viewer through the images, slideshow style. The slideshow effect can be used to add multiple visuals to match the text, or to create simple animations.

You can find more information about this section and how to use it on our support site.

Scrollmation 

Shorthand's other Scrollmation section works in either two-column or two-row format, depending on whether you're viewing on desktop or mobile. Generally speaking, one column/row is occupied with text, and the other with visuals.

Similar to Background Scrollmation, when you supply more than one image, the images transition as you scroll.

On mobile, you also have the option of placing the images inline — that is, in the most meaningful static positions within the text column.

For more detail, you can check out our support document on Scrollmation.

Both sections make for powerful and engaging visual storytelling. You can use them to create galleries or to animate data, just to name two ideas. And best of all? The animation effects are created with ordinary images — no tricky HTML, custom code or animation software required.

Read on for five great ways to use Scrollmation...

Both the Scrollmation sections provide a great way of adding context or visual elements alongside your text in a type of gallery format.

Take this story, Encounters with the Greatest Library in the World, by Penguin Books, which features a selection of some of the most famous books it has published.

It uses Scrollmation to show book covers throughout the ages, and allows the reader to easily compare the book covers by scrolling up and down in their own time.

By featuring multiple images with subtle changes, or by taking still frames from a video file, you can easily create flipbook-style animations in both of the Scrollmation sections.

Redd Barna, the Norwegian branch of Save the Children, did just that in this award-winning story about clothing, Det Finnes Darlige Klær.

As you scroll through the Background Scrollmation section, the images change, providing the effect of the outfits spinning before your eyes.

Featuring flat, single-image infographics can leave your readers having to do a lot of the work to digest all that information in one hit.

By using the Scrollmation sections, you can deliver data in an incremental and interactive fashion, making charts grow and change as the reader moves through the story at their own pace.

You can achieve a similar animation style on mobile as well. Just use two row Scrollmation, or further tailor the experience across devices by using the hide/show feature.

Scrollmation works beautifully to animate graphs, charts, and all manner of data visualisations to create effective, no-code data interactives for the web.

While there are some fantastic third-party tools you can use for creating interactive timelines (check out some listed here), the Scrollmation sections should be considered when planning.

Not only can you keep it simple by using images, you can also ensure seamless interactivity, in keeping with the scrolling action of the story. This makes for a truly engaging experience for readers. Check out these 10 great web timeline examples for further inspiration.

One of the simplest uses of the Scrollmation and Background Scrollmation sections is to present one image as background media, or an image to the left/right on desktop, and inline or above on portrait screens.

Having the ability to add multiple images in Scrollmation sections doesn't imply that you always should — don't fall back on gimmickry. Always think about how each section adds to the flow and to your readers' understanding of the narrative.

If you'd like to watch the recording of our Scrollmation webinar, or any other sessions we have run previously, click through to the resources on our support site.

What do you think?

If there are any webinars you'd like to see added to the schedule, do let us know.