How to create interactive graphics
Animate graphics and charts for the web — no coding required.
At Shorthand, we're passionate about making sure all our users know how to get the very best out of our tool.
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 5 great ways to use Scrollmation...
1. Galleries
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.
2. Flipbook animation
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.
3. Data visualisation
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.
Euromoney Thought Leadership Consulting employed that method in a data-driven story about artificial intelligence, Ghosts in the Machine: Revisited.
Watch how the comparative stats from 2016 and 2018 build as you scroll through on desktop. (For mobile, they chose to place the final image inline.)
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.
4. Timelines
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.
In the latter part of this anniversary story by Honda, 70 Years of Honda, Background Scrollmation is used to step the reader through key events.
The timeline is created by filling the central overlaid text column with a series of inline images corresponding to different time periods.
Great Ormond Street Hospital used a similar technique with Scrollmation to create an animated timeline in the story GOSH at 165.
They have cropped the images to make it appear as if the timeline is moving off screen as you scroll.
5. A single image
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.
See how Source Media's American Banker used a Background Scrollmation section in the third section of this story, Bank CEO's fire-and-rehire maneuver reaps windfall at taxpayer expense.
Having the ability to add multiple images in Scrollmation sections doesn't imply that you always should — don't fall foul of 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.
Built with Shorthand